在工程化地使用webpack时，公共代码抽离是不可或缺的，4.x版本之后，commonsChunkPlugin已经被去掉，splitChunksPlugins登上舞台，并且优化了很多配置选项，集体课件官方文档，这里不做过多说明。
在使用splitChunksPlugins之前，首先要知道splitChunksPlugins是webpack主模块中的一个细分模块，无需npm引入。功能上，splitChunksPlugins只能用于如何抽离公用的代码，也就是抽离公用代码的规则，要记住，除了这个功能之外，splitChunksPlugins再无其他功能（明白这点很重要，至少我自己在这点上被坑到过）。
首先先说每个配置项的作用：
*在此说明下， 下文中说到的块即chunks，也就是js文件
1. minSize
分离后的最小块文件大小，单位为字节
2. minChunks
分离前，该块被引入的次数（也就是某个js文件通过import或require引入的次数）
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（所有块）
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 } }