Question

这就是我所拥有的：

a.js

javascript

b.js

$(() => {
  $.x = 42;
  console.log('hello from a');
});

的index.html

$(() => {
  console.log($.x);
  console.log('hello from b');
});

我的问题是，下面的两个webpack配置是否都能达到完全相同的结果？

[1] webpack.config.js（使用imports-loader）

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="/vendor.js"></script>
<script src="/a.js"></script>
<script src="/b.js"></script>

[2] webpack.config.js（使用ProvidePlugin）

const config = {
  entry: {
    a: './a.js',
    b: './b.js',
    vendor: [
      'jquery',
    ],
  },
  module: {
    rules: [
      {
        test: /(a|b)\.js$/,
        use: 'imports-loader?$=jquery',
      },
    ],
  },
};

如果它们相似但不相同，何时使用另一个呢？

此外，在const config = { entry: { a: './a.js', b: './b.js', vendor: [ 'jquery', ], }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', }), ], };中，b.js等于$.x，这是否意味着undefined指的是不同的jQuery对象？如果是这样，我如何让它们引用相同的（全局）jQuery实例？

Answer 1

imports-loader仅在运行父加载程序时拉入导入。（在您的情况下，仅在js文件上。）导入的文件是＆＃34;附加＆＃34;到了父母。

ProviderPlugin导入＆＃34;全局＆＃34;命名空间，随时随地导入任何内容。它通常用于像jquery这样的独立库。

类似，但不一样。

webpack - imports-loader和ProvidePlugin：类似但不一样？

1 个答案: