commons: { chunks: "initial", minChunks: 2, maxInitialRequests: 5, // The default limit is too small to showcase the effect minSize: 0 // This is example is too small to create commons chunks }, 'vendor-pageA': { test: /vue/, // 直接使用 test 来做路径匹配 chunks: "initial", name: "vendor-pageA", enforce: true, }, 'vendor-pageB': { test: /react/, // 直接使用 test 来做路径匹配 chunks: "initial", name: "vendor-pageB", enforce: true, },
成功打包出来了自己想要的东西。
动态引入
动态引入大家应该都不陌生，就是大家所说的懒加载,直接在pageA和pageB页面里动态引入common-async.js，在这里我先说说，splitChunk应该是可以自动化处理类似commonChunk里的async，child等情况的。
import(/* webpackChunkName: "common-async.js" */"./common-async").then(common => { console.log(common); })
还不错，成功打包出来了
这时候再试试，在这个common-async.js里面在引入共同的代码f.js，看看会不会重复打包
f.js成功的被抽离出来了，其他文件也没有被重复打包，挺好的。
注意的地方
cacheGroups 会继承和覆盖splitChunks的配置项，但是test、priorty和reuseExistingChunk只能用于配置缓存组。。
cacheGroups 里的每一项最好都要加上chunks参数，不然可能打包不出来你想要的东西。
minSize 默认是30KB（注意这个体积是压缩之前的）在小于30kb的情况下一定要设置一个值，否则也可能打包不出来你想要的东西，而且这东西要加在cacheGroups里面。
priority 在某些情况下，还是挺有用的，可以设置打包chunks的优先级。
上面的例子里面配置了一个commons，这里的name可以自己设置，也可以不设置，我是没设置的，你可以试试设置了是什么样子的，然后你就会明白这个name其实在某些情况下还是不设置的比较好。
commons: { chunks: "initial", minChunks: 2, maxInitialRequests: 5, // The default limit is too small to showcase the effect minSize: 0 , name: "commons" },
源码
参考文章