与单页应用相比，多页应用存在多个入口（每个页面即一个入口），每一个入口（页面）都意味着一套完整的js代码（包括业务逻辑和加载的第三方库/框架等）。
在上一篇文章（webpack多页应用架构系列（二）：webpack配置常用部分有哪些？）中，我介绍了如何配置多页应用的入口(entry)，然而，如果仅仅如此操作，带来的后果就是，打包生成出来的每一个入口文件都会完整包含所有代码。
你也许会说："咱们以前写页面不也是每个页面都会加载所有的代码吗？浏览器会缓存，没事的啦"。其实问题在于，以前写代码都是单个单个js来加载的，一个页面加载下来的确所有页面都能共享到缓存；而到了webpack这场景，由于对于每一个页面来说，所有的js代码都打包成唯一一个js文件了，而浏览器是无法分辨出该文件内的公共代码并加以缓存的，所以，浏览器就没办法实现公共代码在页面间的缓存了（当前页面的缓存还是OK的，也就是说刷新不需要重新加载）。
想智能判断并打包公共代码？CommonsChunkPlugin能帮到你CommonsChunkPlugin的效果是：在你的多个页面（入口）所引用的代码中，找出其中满足条件（被多少个页面引用过）的代码段，判定为公共代码并打包成一个独立的js文件。至此，你只需要在每个页面都加载这个公共代码的js文件，就可以既保持代码的完整性，又不会重复下载公共代码了（多个页面间会共享此文件的缓存）。
再提一下使用Plugin的方法大部分Plugin的使用方法都有一个固定的套路：
利用Plugin的初始方法并传入Plugin预设的参数进行初始化，生成一个实例。
将此实例插入到webpack配置文件中的plugins参数（数组类型）里即可。
CommonsChunkPlugin的初始化常用参数有哪些？name，给这个包含公共代码的chunk命个名（唯一标识）。
filename，如何命名打包后生产的js文件，也是可以用上[name]、[hash]、[chunkhash]这些变量的啦（具体是什么意思，请看我上一篇文章中关于filename的那一节）。
minChunks，公共代码的判断标准：某个js模块被多少个chunk加载了才算是公共代码。
chunks，表示需要在哪些chunk（也可以理解为webpack配置中entry的每一项）里寻找公共代码进行打包。不设置此参数则默认提取范围为所有的chunk。
实例分析实例来自于我的脚手架项目webpack-seed，我是这样初始化一个CommonsChunkPlugin的实例：