我需要单独的 lodash 模块,这样我的 JS 构建只包含我需要的 lodash 代码(例如 import map from 'lodash/map'
而不是 import _ from 'lodash '
。(实际上,我正在使用 babel-plugin-lodash 来自动执行此操作。)所以在代码中的任何地方我实际上都没有导入整个 'lodash'
。
我希望 webpack 将任何需要包含在 vendor 包中的 lodash 代码放入。正在关注the webpack examples out there为了拆分 vendor 和应用程序包,我知道如何在 vendor 包中包含 所有 lodash(使用 CommonsChunkPlugin)。但我不想只使用 'lodash'
作为入口点并引入整个库。相反,我想让我实际导入的所有以 lodash
开头的模块最终出现在 vendor 包中。
有什么想法吗?
添加
由于我为每个应用程序构建了 3 个 bundle ,情况变得更加复杂:一个 vendor bundle 、一个跨应用程序通用的 bundle (将使用 lodash 模块)和特定于应用程序的代码(也将使用lodash 模块)。
以下是我的 webpack 配置的关键部分:
// ...
entry: {
specificApp: specificAppEntry,
appCommon: [appCommonEntry],
vendor: [listOfVendorJsLibraries],
},
// ...
plugins : [
new webpack.optimize.CommonsChunkPlugin({
names: ['appCommon', 'vendor'],
minChunks: Infinity,
}),
// ...
],
// ...
最佳答案
您可以传递一个minChunks
函数来实现自定义逻辑:https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
您可以使用它来检查正在导入的模块是否来自 node_modules/lodash
。
例如我使用以下方法将从 node_modules
导入的所有内容 放入 vendor
包中:
import path from 'path'
import webpack from 'webpack'
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
return (
module.resource &&
module.resource.indexOf(path.resolve('node_modules')) === 0
)
}
})
与 CommonsChunkPlugin
一起使用的工作解决方案,如评论中所述:
minChunks: function(module, count) {
return module.resource && module.resource.indexOf('lodash') !== -1
}
关于javascript - 我如何使用 webpack 强制将单独需要的 lodash 模块放入 vendor block 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34804430/