官網介紹：http://www.css88.com/doc/webpack2/plugins/commons-chunk-plugin/
生成的js文件見：https://github.com/ChpShy/single-play-demo/tree/master/CommonsChunkPlugin
關於minChunks的介紹：
https://segmentfault.com/q/1010000008726439/revision，
https://segmentfault.com/q/1010000009070061/a-1020000009073036
一、介紹
CommonsChunkPlugin 插件，是一個可選的用於建立一個獨立文件(又稱作 chunk)的功能，這個文件包括多個入口 chunk 的公共模塊。通過將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存起來到緩存中供後續使用。這個帶來速度上的提升，因爲瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件。
以上是官網的介紹，其實CommonsChunkPlugin又什麼好處呢，簡單來說，webpack編譯，如果文件內容有改動，生成的編譯文件的hash值是會變的，即生成的文件名就不一樣了(前提是將hash放入了文件名當中)，那麼瀏覽器就會重新請求該資源。不使用CommonsChunkPlugin拆分模塊，會把項目中的依賴打進app.js當中，如jqury.js等，會導致如果只是改了項目中的一個小地方，瀏覽器就得把所有內容都重新加載一遍，是很耗資源的，而如果我們把jquery拆分到一個獨立的js(vendor.js)中，那麼只要這個js中的內容不變，瀏覽器就不會重新請求，是不是很棒棒、、、
二、參數解釋
1. name: 提取出來的公共chunk的名字
2. filename: 生成公共文件的文件名，如果不配置，默認的output裏面的filename
3. minChunks: number|Infinity|function(module, count) -> boolean，三種選擇，
number：代表模塊至少被調用定義的次數纔會被放到公共模塊當中；（默認爲chunks的數量）
Infinity： 生成的公共文件只包含webpack運行代碼，不會包含其他的模塊
function：設置特定的模塊，webpack會遍歷工程的所有模塊調用改函數，並作爲module入參傳入，
只要匹配(return true)，該模塊就會被編譯進該公共js中
4. chunks：用於從公共模塊當中再進行抽取。如vue工程配置由app.js，vendor.js，manifest.js，
最後的manifest.js就是將vendor裏面的webpack運行代碼和動態生成script節點的代碼提取了出來。
三、場景及總結
1. 不使用CommonsChunkPlugin生成的js文件(289K):
這個沒什麼總結的，jquery編譯在了app.js。
2. 在entry定義chunk：
如果不定義filename，生成的名字由output裏面的filename決定。
生成的js（忽略中間的圖片）：
可以看出，app裏面只有21K了，vendor裏面272K
3. 在CommonsChunkPlugin定義chunk，並且只分離jquery：
編譯結果，和2相同：
4. 在CommonsChunkPlugin定義chunk，並且選中node_modules目錄:
編譯結果：
app.js小了，vendor.js大了，是因爲把除了jquery之外，把css和style的方法也放進了vendor.js
總結：以上並沒有做公共模塊的二次提取，會導致如果app.js的hash變了，vendor裏面有一段生成script插入到html當中的代碼也會改變，從而vendor改變，所以應該生成3個文件，app.js: 工程代碼。vendor.js，依賴的模塊代碼。manifest.js，webpack運行代碼。