单页面应用只有一个入口文件，splitChunks的主要作用是将引用的第三方库拆分出来。从下面的分包结果就可以看出，node_modules中的第三方引用被分离了出来，放在了vendors-main.[hash].js中。
多页面应用
多页面应用的情形稍显复杂，以《webpack4：连奏中的进化》一文中的例子进行代码分割处理，源码的依赖关系为：
entryA.js: vue vuex component10k entryB.js: vue axios component10k entryC.js: vue vuex axios component10k经过代码分割后得到的包如下图所示：
splitChunks提供了更精确的分割策略，但是似乎无法直接通过html-webpack-plugin配置参数来动态解决分割后代码的注入问题，因为分包名称是不确定的。这个场景在使用chunks:'async'默认配置时是不存在的，因为异步模块的引用代码是不需要以<script>标签的形式注入html文件的。
当chunks配置项设置为all或initial时，就会有问题，例如上面示例中，通过在html-webpack-plugin中配置excludeChunks可以去除page和about这两个chunk，但是却无法提前排除vendors-about-page这个chunk，因为打包前无法知道是否会生成这样一个chunk。这个场景笔者并没有找到现成的解决方案，对此场景有需求的读者也许可以通过使用html-webpack-plugin的事件扩展来处理此类场景，也可以使用折中方案，就是第一次打包后记录下新生成的chunk名称，按需填写至html-webpack-plugin的chunks配置项里。
### 4.4 结果分析
通过Bundle Buddy分析工具或webpack-bundle-analyser插件就可以看到分包前后对于公共代码的抽取带来的影响（图片来自参考文献的博文）：
【1】附加中文件说明：
webpack.spa.config.js——单页面应用代码分割配置实例
main.js——单页面应用入口文件
webpack.multi.config.js——多页面应用代码分割配置实例
entryA.js,entryB.js,entryC.js——多页面应用的3个入口
【2】参考文献：