Webpack:从条目和子块中提取公共模块以分离公共块
Posted
技术标签:
【中文标题】Webpack:从条目和子块中提取公共模块以分离公共块【英文标题】:Webpack: extract common modules from entry and child chunks to separate commons chunk 【发布时间】:2018-05-21 14:45:11 【问题描述】:我有一个使用代码拆分的 webpack 构建的应用程序。我现在想将所有符合特定条件的通用模块(在本例中为node_modules
)聚合到所有条目块和所有子块(通过代码拆分生成)到一个单独的公共块中。 p>
如果我这样做:
new webpack.optimize.CommonsChunkPlugin(
children: true,
async: 'vendor',
minChunks: (module) =>
const isVendor = module.context.split('/').some(dir => dir === 'vendor');
return isVendor;
,
),
Webpack 会将所有匹配 minChunks
函数的模块聚合到一个单独的公共块中,但仅适用于子块中的模块——它不会将入口块中的模块聚合到公共块中。结果,我的条目块和公共块中都出现了重复的模块。
这怎么可能?
示例:https://github.com/OliverJAsh/webpack-commons-vendor/blob/f524bfdb0e047161c453a6b84f89ab6d25d6c648/webpack.config.js
【问题讨论】:
【参考方案1】:您需要创建一个包含所有常用库的 webpack DLL。
https://webpack.js.org/plugins/dll-plugin/
可以在 React-Boilerplate 中找到有关如何设置的示例。
https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/webpack/webpack.dll.babel.js
这是示例的配置。
https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/config.js
【讨论】:
以上是关于Webpack:从条目和子块中提取公共模块以分离公共块的主要内容,如果未能解决你的问题,请参考以下文章