webpack - imports-loader 和 ProvidePlugin：相似但不一样？答案

【问题标题】：webpack - imports-loader and ProvidePlugin: similar but not the same?webpack - imports-loader 和 ProvidePlugin：相似但不一样？
【发布时间】：2017-05-08 17:06:35
【问题描述】：

这是我所拥有的：

a.js

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

b.js

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

index.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 实例？

【问题讨论】：

标签： javascript webpack webpack-2 imports-loader

【解决方案1】：

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

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

相似，但不一样。

【讨论】：