CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，是一把优化项目的利器。

先来说一下各种教程以及文档中CommonsChunkPlugin提及到chunk有哪几种，主要有以下三种：

1.webpack当中配置的入口文件（entry）是chunk，可以理解为entry chunk

2.入口文件以及它的依赖文件通过code split （代码分割）出来的也是chunk，可以理解为children chunk

3.通过commonsChunkPlugin创建出来的文件也是chunk，可以理解为commons chunk

CommonsChunkPlugin可配置的属性：

name:可以是已经存在的chunk（一般指入口文件）对应的name，那么就会把公共模块代码合并到这个chunk上；否则，就会创建名字为name的commons chunk进行合并

filename:指定commons chunk的文件名

chunks:指定该source chunk，即指定从哪些chunk当中去找公共模块，省略该选项的时候，默认就是entry chunks

minChunks:既可以数字，也可以是函数，还可以是Infinity，具体用法和区别下面会说。

CommonsChunkPlugin插件的作用：

让我们分三步讲解：

1.不分离出第三方库和自定义公共模块

项目初始结构，后面打包后会生成dist目录：

src目录下各个文件内容都很简洁的，如下：

package.json文件：

webpack.config.js:

接着在命令行运行npm run build，此时项目中多了dist目录：

再来看一下命令行中webpack的打包信息：

查看first.js和second.js，会发现共同引用的common.js文件和jquery都被打包进去了，这肯定不合理，公共模块重复打包体积过大。

2.分离出第三方库、自定义公共模块、webpack运行文件

这时候修改webpack.config.js新增一个入口文件vendor和CommonsChunkPlugin插件进行公共模块的提取：

查看dist目录下，新增了一个vendor.js的文件：

再来查看一下命令行中webpack的打包信息：

通过查看vendor.js文件，发现first.js和second.js文件中依赖的jquery和common.js都被打包进vendor.js中，同时还有webpack的运行文件，总的来说，我们初步的目的达到，提取公共模块，但是它们都在同一个文件中。

到这里，肯定有人希望自家的vendor.js纯白无瑕，只包括第三方库，不包括自定义的公共模块和webpack运行文件，又或者希望包含第三方库和公共模块，不包含webpack运行文件。

其实，这种想法是对的，特别是分离出webpack运行文件，因为每次打包webpack运行文件都会变，如果你不分离出webpack运行文件，每次打包生成bendor.js对应的哈希值都会变化，导致vendor.js改变，但实际上你的第三方库其实是没有变，然而浏览器会认为你原来缓存的vendor.js就失效，要重新去服务器中获取，其实只是webpack运行文件变化而已，就要人家重新加载，好冤啊。。。

那么怎么解决呢？