缓存组会继承splitChunks的配置，但是 test、priorty和reuseExistingChunk只能用于配置缓存组 。cacheGroups是一个对象，按上述介绍的键值对方式来配置即可，值代表对应的选项。除此之外，所有上面列出的选择都是可以用在缓存组里的：chunks, minSize, minChunks, maxAsyncRequests, maxInitialRequests, name。可以通过optimization.splitChunks.cacheGroups.default: false禁用default缓存组。 默认缓存组的优先级(priotity)是负数，因此所有自定义缓存组都可以有比它更高优先级（译注：更高优先级的缓存组可以优先打包所选择的模块）（默认自定义缓存组优先级为0）
现在我们再重新来看一下pageA、pageB、pageC三个js文件，这三个文件中都引入了utility2.js文件，但是此文件size很明显小于30KB，所以这部分公用代码并没有分割出来。如果想要分割出来很简单，只需要：
optimization: { splitChunks: { chunks: "all", minSize: 0 },
执行npm run build打包命令之后，查看dist目录
显然多了一个pageA~pageB~pageC.[hash].bundle.js文件。查看文件可得知此文件中存储了utility2.js中的代码。如下图所示（借助于webpack-bundle-analyzer插件，详情文章末尾附录）。
上图可以看出，React相关代码均放在了vendors~pageA~pageB~pageC.[hash].bundle.js文件中，如果我们想要抽离出React代码，应该怎么做呐？
splitChunks: { chunks: "all", cacheGroups: { commons: { chunks: "initial", minChunks: 2, name: "commons", maxInitialRequests: 5, minSize: 0, // 默认是30kb，minSize设置为0之后 // 多次引用的utility1.js和utility2.js会被压缩到commons中 }, reactBase: { test: (module) => { return /react|redux|prop-types/.test(module.context); }, // 直接使用 test 来做路径匹配，抽离react相关代码 chunks: "initial", name: "reactBase", priority: 10, } } },
run build之后如下图所示。
看似非常完美，但是reactBase文件中竟然包含了node_modules，神奇的问题？室友都睡觉了，这键盘声影响不好，明天接着看。
附录
我们再安装一个 webpack-bundle-analyzer，这个插件会清晰的展示出打包后的各个bundle所依赖的模块：
npm i webpack-bundle-analyzer -D
引入：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
使用，在plugins数组中添加即可：
new BundleAnalyzerPlugin()