我正在尝试做一些我认为应该是可能的事情,但我真的无法从 webpack 文档中理解如何去做。
我正在编写一个 JavaScript 库,其中包含多个可能相互依赖或不依赖的模块。最重要的是,所有模块都使用 jQuery,其中一些可能需要 jQuery 插件。然后,该库将在可能需要部分或全部模块的几个不同网站上使用。
定义我的模块之间的依赖关系非常容易,但定义它们的第三方依赖关系似乎比我预期的要难。
我想要实现 的目标:对于每个应用程序,我希望有两个捆绑文件,一个包含必要的第三方依赖项,另一个包含我库中的必要模块。
示例 :假设我的库有以下模块:
我有一个需要模块 a、b 和 c 的应用程序(将其视为唯一的入口文件)。这种情况下的 Webpack 应该生成以下文件:
最后,我更愿意将 jQuery 作为一个全局的,所以我不需要在每个文件上都需要它(例如,我可以只在主文件上需要它)。并且 jQuery 插件只会在需要时扩展 $ 全局(如果它们可用于其他不需要它们的模块,这不是问题)。
假设这是可能的,那么这种情况下的 webpack 配置文件的示例是什么?我在我的配置文件上尝试了几种加载器、外部和插件的组合,但我并没有真正了解它们在做什么以及我应该使用哪些。谢谢!
在我的 webpack.config.js(版本 1、2、3)文件中,我有
function isExternal(module) { var context = module.context; if (typeof context !== 'string') { return false; } return context.indexOf('node_modules') !== -1; }
在我的插件数组中
plugins: [ new CommonsChunkPlugin({ name: 'vendors', minChunks: function(module) { return isExternal(module); } }), // Other plugins ]
现在我有一个文件,它只根据需要将第 3 方库添加到一个文件中。
如果您想在分隔供应商和入口点文件的位置更细化:
plugins: [ new CommonsChunkPlugin({ name: 'common', minChunks: function(module, count) { return !isExternal(module) && count >= 2; // adjustable } }), new CommonsChunkPlugin({ name: 'vendors', chunks: ['common'], // or if you have an key value object for your entries // chunks: Object.keys(entry).concat('common') minChunks: function(module) { return isExternal(module); } }) ]
请注意,插件的顺序很重要。
此外,这将在版本 4 中发生变化。当这是官方的时,我会更新这个答案。
更新: windows 用户的 indexOf 搜索更改