8

我有一个使用代码拆分的 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

在此处输入图像描述

4

1 回答 1

5

您需要创建一个包含所有常用库的 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

于 2017-12-13T23:35:33.717 回答