对各种webpack匀场方法的困惑
我对webpack允许暴露一个在npm上没有的variables或将其放入包中的各种方法有点困惑。 我能够通过使用暴露谷歌可视化图表脚本的全球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不分配给一个variables？ 它意味着去哪里？ 哪里是关于这个语法正在发生的文档？
require("imports?$=jquery!./file.js")
有人能提供一些什么时候应该使用的例子吗？
imports装载机非常简单易懂。 如果你使用其中的一个，或者两者兼而有之，你的模块被包装到另一个带有导出和导出的函数中。
例如，我使用paho-mqtt模块， paho-mqtt模块的意思是在页面上使用像全局的<script src="">
import Paho from 'imports-loader?this=>window!exports-loader?Paho!paho-mqtt'; //and this is transformed by webpack to something like: (function(window){ //wow you can use `window here`, `this` in the global context === window. // original module code here // that exposes global var `Paho` module.exports = Paho; })(this);
scripts-loader
我从来没有用过这个，但我想这个想法很简单。 我认为可以使用，如果由于某种原因，你想注入一个脚本或function或其中一个模块/文件你没有控制他们的东西。
imports-loader ＆ exports-loader
在其中一个应用程序中，我们不得不使用tinymce ，在旧版本中依赖于它始终是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所以我们可以在我们的应用程序中使用它作为一个正常的模块。
幸运的是，所有这些已经在最新的版本中得到了修复。
ProvidePlugin
根据我的经验，当一个库依赖另一个在全局范围内的库时，这是非常有用的。 比如像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/更好的新文档页面