個人維護的 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屬於比較新的版本，官方文檔有些細節說的不是很清楚，只能自己摸索。如有疑問，歡迎指教。