个人维护的 webpack@latest 多页脚手架2.X已经发布，喜欢请给星，详见： https://github.com/pomelott/webpack-multi-page-cli
在工程化地使用webpack时，公共代码抽离是不可或缺的，4.x版本之后，commonsChunkPlugin已经被去掉，splitChunksPlugins登上舞台，并且优化了很多配置选项，具体可见官方文档，这里不做过多说明。
在使用splitChunksPlugins之前，首先要知道splitChunksPlugins是webpack主模块中的一个细分模块，无需npm引入。功能上，splitChunksPlugins只能用于如何抽离公用的代码，也就是抽离公用代码的规则，要记住，除了这个功能之外，splitChunksPlugins再无其他功能（明白这点很重要，至少我自己在这点上被坑到过）。
首先先说每个配置项的作用：
*在此说明下， 下文中说到的块即chunks，也就是js文件
1. minSize
分离前的最小块文件大小，单位为字节
2. minChunks
分离前，该块被引入的次数
3.maxInitialRequests
一个入口文件可以并行加载的最大文件数量
4.maxAsyncRequests
内层文件（第二层）按需加载时最大的并行加载数量
5.name
用以控制分离后代码块的命名，当存在匹配的缓存组（后面会说到）时，命名使用缓存组中的name值，若不存在则为 [来源]~[入口的key值].js 的格式
6.automaticNameDelimiter
修改上文中的 “~” , 若改为： “-” 则分离后的js默认命名规则为 [来源]-[入口的key值].js
7.test
用于规定缓存组匹配的文件位置，test: /node_modules/ 即为匹配相应文件夹下的模块
8.cacheGroups
名字叫做缓存组，其实就是存放分离代码块的规则的对象，叫做cacheGroup的原因是webpack会将规则放置在cache流中，为对应的块文件匹配对应的流，从而生成分离后的块。
cacheGroup中priority 为分离规则的优先级，优先级越高，则优先匹配。
9.chunks
匹配的块的类型：initial（初始块），async（按需加载的异步块），all（所有块）
10.priority
这个是最重要的，即便是所有配置项都写好了，优先级不够，或者优先级设置不正确，也得不到相应的结果。当需要优先匹配缓存组的规则时，priority需要设置为正数，当需要优先匹配默认设置时，缓存组需设置为负数，0为两者的分界点。
splitChunks的常用配置：
optimization: { splitChunks: { cacheGroups:{ // 比如你要单独把jq之类的官方库文件打包到一起，就可以使用这个缓存组，如想具体到库文件（jq）为例，就可把test写到具体目录下 vendor: { test: /node_modules/, name: "vendor", priority: 10, enforce: true }, // 这里定义的是在分离前被引用过两次的文件，将其一同打包到common.js中，最小为30K common: { name: "common", minChunks: 2, minSize: 30000 } }, chunks:"all", minSize: 40000 } }
4.x属于比较新的版本，官方文档有些细节说的不是很清楚，只能自己摸索。如有疑问，欢迎指教。