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/webpack/webpack.dll.babel.js

这是示例的配置。

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?

---

Example: https://github.com/OliverJAsh/webpack-commons-vendor/blob/f524bfdb0e047161c453a6b84f89ab6d25d6c648/webpack.config.js

解决方案

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.

https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/webpack/webpack.dll.babel.js

And here is the config for the example.

https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/config.js

这篇关于Webpack：从条目和子块中提取通用模块以分离通用块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！