Webpack:从入口和子块中提取常见模块以分离公共块

Question

我有一个使用webpack构建的应用程序,它使用代码分割.我现在想要将所有符合特定条件的通用模块(在本例中node_modules)聚合在所有条目块和所有子块(通过代码拆分生成)到一个单独的公共块中.

如果我这样做:

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

Answer 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