CommonsChunkPlugin主要是用來提取第三方庫和公共模塊，避免首屏加載的bundle文件或者按需加載的bundle文件體積過大，從而導致加載時間過長，是一把優化項目的利器。
CommonsChunkPlugin作用：
一、不分離出第三方和自定義模塊
項目初始結構，後面打包後會生成dist目錄：
src目錄下各個文件內容都很簡潔的，如下：
webpack.config.js:
接着在命令行運行npm run build，此時項目中多了dist目錄：
再來看一下命令行中webpack的打包信息：
查看first.js和second.js，會發現共同引用的common.js文件和jquery都被打包進去了，這肯定不合理，公共模塊重複打包體積過大。
二、分離出第三方庫、自定義公共模塊、webpack運行文件
這時候修改webpack.config.js新增一個入口文件vendor和CommonsChunkPlugin插件進行公共模塊的提取：
查看dist目錄下，新增了一個vendor.js的文件：
再來查看一下命令行中webpack的打包信息：
通過查看vendor.js文件，發現first.js和second.js文件中依賴的jquery和common.js都被打包進vendor.js中，同時還有webpack的運行文件，總的來說，我們初步的目的達到，提取公共模塊，但是它們都在同一個文件中。
到這裏，肯定有人希望自家的vendor.js純白無瑕，只包括第三方庫，不包括自定義的公共模塊和webpack運行文件，
又或者希望包含第三方庫和公共模塊，不包含webpack運行文件。
其實，這種想法是對的，特別是分離出webpack運行文件，因爲每次打包webpack運行文件都會變，如果你不分離出webpack運行文件，每次打包生成bendor.js對應的哈希值都會變化，導致vendor.js改變，但實際上你的第三方庫其實是沒有變，然而瀏覽器會認爲你原來緩存的vendor.js就失效，要重新去服務器中獲取，其實只是webpack運行文件變化而已，就要人家重新加載，好冤啊。。。
那麼怎麼解決呢？
單獨分離出第三方庫、自定義公共模塊、webpack運行文件
這裏我們分兩步走：
1.先單獨抽離出webpack運行文件
2.接着單獨抽離第三方庫和自定義公共模塊，這裏利用minChunks有兩種方法可以完成，往後看就知道了。
1、抽離webpack運行文件
先來抽離webpack運行文件，修改webpack配置文件：
其實上面這段代碼，等價於下面這段：
上面這段抽離webpack運行文件代碼的意思是創建一個名爲runtime的commons chunk進行webpack運行文件的抽離，其中source chunks是vendor.js。（基於三方庫和公共模塊和運行webpack文件在vendor，再基於vendor chunk抽出webpack runtime.js文件）
查看dist目錄下，新增了一個runtime.js的文件，其實就是webpack的運行文件：
再來查看一下命令行中webpack的打包信息，你會發現vendor.js的體積已經減小，說明已經把webpack運行文件提取出來了：
可是，vendor.js中還有自定義的公共模塊common.js，人家只想vendor.js擁有項目依賴的第三方庫而已（這裏是jquery），這個時候把minChunks這個屬性引進來可以做到。
minChunks可以設置爲數字、函數和Infinity，默認值是2，並不是官方文檔說的入口文件的數量，下面解釋下minChunks含義：
1.數字：模塊被多少個chunk公共引用才被抽取出來成爲commons chunk
2.函數：接受（module，count）兩個參數，返回一個布爾值，你可以在函數內進行你規定好的邏輯來決定某個模塊是否提取成爲commons chunk
3.Infinity：只有當入口文件（entry chunks）>3才生效，用來第三方庫中分離自定義的公共模塊
2、抽離第三方庫和自定義公共模塊
要在vendor.js中把第三方庫單獨抽離出來，上面也說到了有兩種方法。
第一種方法，minChunks設爲Infinity，修改webpack配置文件如下：
查看dist目錄下，新增了一個common.js的文件：
再來看一下命令行中webpack的打包信息，自定義的公共模塊分離出來：
這時候的vendor.js就純白無瑕，只包含第三方文件，common.js就是自定義的公共模塊，runtime.js就是webpack的運行文件。
=以上commonsChunkPlugin全過程=
以下概要：
CommonsChunkPlugin提及到chunk有主要有以下三種：
1、webpack當中配置的入口文件（entry）是chunk，可以理解爲entry chunk；
2、入口文件以及它的依賴文件通過code split （代碼分割）出來的也是chunk，可以理解爲children chunk；
3、通過commonsChunkPlugin創建出來的文件也是chunk，可以理解爲commons chunk；
純淨的提取公共模塊過程：
1）項目拆公共模塊vendor，包含第三方庫和自定義公共模塊和webpack runtime.js運行文件；
2）基於vendor拆出webpack runtime.js文件；
3）基於vendor拆出runtime後，使用minChunks，將第三方庫和自定義公共模塊拆出；
4）導出vendor.js，runtime.js，common.js
Reference URL:
1、webpack——CommonsChunkPlugin
https://blog.csdn.net/zy444263/article/details/85252477
2、webpack配置中常用的CommonsChunkPlugin認識
https://www.jianshu.com/p/c0fce0c764ed