对各种Webpack匀场方法的困惑

Question

我对webpack允许公开npm上不可用或不包含在变量中的变量的各种方式感到有些困惑。我能够google通过使用公开Google可视化图表脚本的全局变量

resolve: {
    extensions: ['.js', '.json'],
    alias: {
      'google': path.resolve(__dirname, 'vendor', 'google.js')
    }
  }

结合

  plugins: [
    new webpack.ProvidePlugin({
      'google': 'google'
    })
  ]

但是，查看webpack文档，还有其他两种匀场方法，看起来它们可能会做类似的事情。有imports-loader和exports-loader，和script-loader。我知道我已经链接到这些文档，但是仍然不清楚他们何时使用这四个文档的描述。

还要看这个例子，这个require没有分配给变量吗？这意味着去哪里？与此语法有关的文档在哪里？

require("imports?$=jquery!./file.js")

Answer 1

`scripts-loader`

我自己从未使用过这个，但我想这个想法很简单。我认为如果由于某种原因您想在您无法控制的模块/文件之一中注入脚本或函数或其他内容，则可以使用它。

在我开发的一个应用程序中，我们必须使用tinymce它，在其旧版本中依赖于this始终window，因为它被构建为作为全局脚本工作。不作为 CommonJS 或 ES 模块。

因此，为了解决这个问题，我们必须使用它，import-loader以便它可以注入window到脚本中。这是它的样子webpack.config.js

{ test: require.resolve('tinymce/tinymce'), use: ['imports?this=>window', 'exports?tinymce'] }

这表示注入代替window我们在这里this使用的&，exports-loader这样我们就可以将全局导出tinymce为默认导出命名，tinymce这样我们就可以将它用作应用程序中的普通模块。

值得庆幸的是，所有这些都已在最新版本中得到修复。

根据我的经验，当一个库依赖于全局范围内的另一个库或其他库时，这非常有用。例如，像 jQuery 插件一样，它们确实使用这些$, window.$, jQuery&之一window.jQuery

  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.$': 'jquery',
    'window.jQuery': 'jquery',
  }),

因此，这个插件要做的就是确保当webpack看到这些变体之一时，它会向其提供 jQuery 对象。

例如，imports-loader您可能不知道哪个脚本使用哪个变体。因此，您可以在更具体的情况webpack下处理这个问题。imports-loader

我希望这可以帮助您理解它们之间的差异，这也是新的文档页面，我认为它比您检查的页面更好https://webpack.js.org/guides/shimming/