Webpack ProvidePlugin vs外部？
我正在探索在Backbone.js中使用Webpack的想法。
我已经阅读了快速入门指南，对Webpack的工作原理有了大致的了解，但我不清楚如何加载像jquery / like / underscore这样的依赖库。
它们是否应该用<script>从外部加载，或者这是不是像RequireJS的填充程序一样，是Webpack可以处理的？
根据webpack doc: shimming modules的说法，ProvidePlugin和externals似乎与此相关( bundle!加载器也是如此)，但我不知道什么时候使用哪一个。
谢谢
回答 2
Stack Overflow用户
发布于 2015-06-02 12:18:34
需要注意的一件很酷的事情是，如果您将ProvidePlugin与externals属性结合使用，它将允许您将jQuery传递到您的webpack模块闭包中，而不必显式地require它。这对于重构具有大量引用$的不同文件的遗留代码非常有用。
//webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: '[name].js'
},
externals: {
jquery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
})
]
};现在在index.js中
console.log(typeof $ === 'function');将编译后的输出传递到webpackBootstrap闭包中，如下所示：
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function($) {
console.log(typeof $ === 'function');
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
module.exports = jQuery;
/***/ }
/******/ ])因此，您可以看到$正在从CDN引用全局/窗口jQuery，但正在被传递到闭包中。我不确定这是预期的功能还是幸运的技巧，但它似乎对我的用例很有效。
Stack Overflow用户
发布于 2015-01-26 06:14:25
我知道这是一个古老的帖子，但我想提一下，在这种情况下，webpack脚本加载器可能也很有用。摘自webpack的文献：
脚本:在全局上下文中执行一次JavaScript文件(如在脚本标记中)，要求不解析。
http://webpack.github.io/docs/list-of-loaders.html
https://github.com/webpack/script-loader
我发现，在迁移将JS供应商文件和应用程序文件连接在一起的旧构建过程时，这一点特别有用。需要警告的是，脚本加载器似乎只在重载require()时起作用，并且在webpack.config文件中指定的情况下不起作用。虽然，许多人认为重载require是一种糟糕的做法，但它对于将供应商和应用程序脚本连接到一个捆绑包中，同时暴露不需要填充到附加的webpack捆绑包中的JS全局变量非常有用。例如：
require('script!jquery-cookie/jquery.cookie');
require('script!history.js/scripts/bundled-uncompressed/html4+html5/jquery.history');
require('script!momentjs');
require('./scripts/main.js');这将使$.cookie、历史和时刻在此捆绑包内外全局可用，并将这些供应商库与main.js脚本及其所有required文件捆绑在一起。
此外，此技术的有用之处在于：
resolve: {
extensions: ["", ".js"],
modulesDirectories: ['node_modules', 'bower_components']
},
plugins: [
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
)
]将查看每个required库package.json中的main文件。在上面的示例中，History.js没有指定main文件，因此文件的路径是必需的。
https://stackoverflow.com/questions/23305599
复制相似问题