2

这是我所拥有的：

一个.js

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

b.js

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

索引.html

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

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

[1] webpack.config.js（带有导入加载器）

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

[2] webpack.config.js（带有ProvidePlugin）

const config = {
  entry: {
    a: './a.js',
    b: './b.js',
    vendor: [
      'jquery',
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
    }),
  ],
};

如果它们相似但不相同，那么何时使用一个而不是另一个？

此外，在b.js,$.x等于undefined，这是否意味着$指的是不同的 jQuery 对象？如果是这样，我如何让它们引用相同的（全局）jQuery 实例？

4

1 回答 1

1

imports-loader只有在父加载器运行时才会引入导入。（在您的情况下，仅在 js 文件上。）导入的文件“附加”到父级。

ProviderPlugin 导入到“全局”命名空间中，使您导入的任何内容都可以在任何地方使用。它通常用于像 jquery 这样的独立库。

类似，但不一样。

于 2017-05-08T17:14:32.277 回答