Webpack:从条目和子块中提取通用模块以分离通用块 [英] Webpack: extract common modules from entry and child chunks to separate commons chunk
问题描述
我有一个使用webpack构建的应用程序,该应用程序使用代码拆分。现在,我想汇总所有条目块和所有子块(通过代码生成)中符合特定条件(在本例中为 node_modules
)的所有通用模块
如果我这样做:
new webpack.optimize.CommonsChunkPlugin({
children:true,
async:'vendor',
minChunks:(module)=> {
const isVendor = module .context.split('/')。some(dir => dir ==='供应商');
return isVendor;
},
}),
Webpack会将与 minChunks
函数匹配的所有模块聚合到一个单独的Commons块,但仅适用于子块中的模块-不会将条目块中的模块聚合到Commons块中。结果,我复制了同时出现在输入块和公共块中的模块。
这怎么可能?
示例:
您需要创建一个包含所有常用库的Webpack DLL。 / p>
https://webpack.js。 org / plugins / dll-plugin /
在React-Boilerplate中可以找到有关设置方法的示例。
这是示例的配置。
https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/config.js
I have an application built with webpack that uses code splitting. I now want to aggregate all common modules that match specific criteria (in this case node_modules
) across all entry chunks and all child chunks (generated via code splitting) into a single separate commons chunk.
If I do this:
new webpack.optimize.CommonsChunkPlugin({
children: true,
async: 'vendor',
minChunks: (module) => {
const isVendor = module.context.split('/').some(dir => dir === 'vendor');
return isVendor;
},
}),
Webpack will aggregate all modules that match the minChunks
function into a separate commons chunk, but only for modules from child chunks—it will not aggregate modules from the entry chunk into the commons chunk. As a result, I have duplicated modules that appear in both my entry chunk and commons chunk.
How is this possible?
You need to create a webpack DLL that contains all your commonly used libs.
https://webpack.js.org/plugins/dll-plugin/
An example on how to set this up can be found in React-Boilerplate.
And here is the config for the example.
https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/config.js
这篇关于Webpack:从条目和子块中提取通用模块以分离通用块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!