本文主要是介绍webpack--关于CommonsChunkPlugin拆分模块的应用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
官网介绍：http://www.css88.com/doc/webpack2/plugins/commons-chunk-plugin/
生成的js文件见：https://github.com/ChpShy/single-play-demo/tree/master/CommonsChunkPlugin
关于minChunks的介绍：
https://segmentfault.com/q/1010000008726439/revision，
https://segmentfault.com/q/1010000009070061/a-1020000009073036
一、介绍
CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
以上是官网的介绍，其实CommonsChunkPlugin又什么好处呢，简单来说，webpack编译，如果文件内容有改动，生成的编译文件的hash值是会变的，即生成的文件名就不一样了(前提是将hash放入了文件名当中)，那么浏览器就会重新请求该资源。不使用CommonsChunkPlugin拆分模块，会把项目中的依赖打进app.js当中，如jqury.js等，会导致如果只是改了项目中的一个小地方，浏览器就得把所有内容都重新加载一遍，是很耗资源的，而如果我们把jquery拆分到一个独立的js(vendor.js)中，那么只要这个js中的内容不变，浏览器就不会重新请求，是不是很棒棒、、、
二、参数解释
1. name: 提取出来的公共chunk的名字
2. filename: 生成公共文件的文件名，如果不配置，默认的output里面的filename
3. minChunks: number|Infinity|function(module, count) -> boolean，三种选择，
number：代表模块至少被调用定义的次数才会被放到公共模块当中；（默认为chunks的数量）
Infinity： 生成的公共文件只包含webpack运行代码，不会包含其他的模块
function：设置特定的模块，webpack会遍历工程的所有模块调用改函数，并作为module入参传入，
只要匹配(return true)，该模块就会被编译进该公共js中
4. chunks：用于从公共模块当中再进行抽取。如vue工程配置由app.js，vendor.js，manifest.js，
最后的manifest.js就是将vendor里面的webpack运行代码和动态生成script节点的代码提取了出来。
三、场景及总结
1. 不使用CommonsChunkPlugin生成的js文件(289K):
这个没什么总结的，jquery编译在了app.js。
2. 在entry定义chunk：
如果不定义filename，生成的名字由output里面的filename决定。
生成的js（忽略中间的图片）：
可以看出，app里面只有21K了，vendor里面272K
3. 在CommonsChunkPlugin定义chunk，并且只分离jquery：
编译结果，和2相同：
4. 在CommonsChunkPlugin定义chunk，并且选中node_modules目录:
编译结果：
app.js小了，vendor.js大了，是因为把除了jquery之外，把css和style的方法也放进了vendor.js
总结：以上并没有做公共模块的二次提取，会导致如果app.js的hash变了，vendor里面有一段生成script插入到html当中的代码也会改变，从而vendor改变，所以应该生成3个文件，app.js: 工程代码。vendor.js，依赖的模块代码。manifest.js，webpack运行代码。
这篇关于webpack--关于CommonsChunkPlugin拆分模块的应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
