CommonsChunkPlugin官方文件解釋：

CommonsChunkPlugin 外掛，是一個可選的用於建立一個獨立檔案(又稱作 chunk)的功能，這個檔案包括多個入口 chunk 的公共模組。通過將公共模組拆出來，最終合成的檔案能夠在最開始的時候載入一次，便存到快取中供後續使用。這個帶來速度上的提升，因為瀏覽器會迅速將公共的程式碼從快取中取出來，而不是每次訪問一個新頁面時，再去載入一個更大的檔案。

而在實際專案中，本人是這樣的應用的，專案結構如下圖：

其中的index和login用到了 m1.js,m2.js的方法，程式碼如下：

import {xiaoyu} from
 
 '../m1.js'
import {dayu} from '../m2.js'

在webpack.config.js是這麼配置的：

entry:{
    'index':['./src/page/index/index.js'],
    'login':['./src/page/login/index.js']
  },
 output:{
    path:path.resolve(__dirname, 'dist'),
    filename:'js/[name].js'
  },

所以最後打包，會在./dist/下面分別打包出index.js和login.js， 看了一下打包後的檔案。
毫無意外，這兩個檔案裡面都打包了 m1.js,m2.js

在webpack.config.js配置如下

plugins:[
    new webpack.optimize.CommonsChunkPlugin({
      name : 'common',
      filename : 'js/base.js'
    })
  ]

加入後再重新打包

會發現 dist下面的js資料夾下面會多出一個base.js的打包檔案，裡面就是把 m1.js,m2.js

還有一個問題就是

m1.js,m2.js是我分別在用到的時候 import引入進來的，如果有一個檔案存放的就是共用方法，那我難道要把這個檔案import引入到所有的檔案裡面去嗎？
這個問題CommonsChunkPlugin也是能解決的：

首先需求如下圖

在common下面的檔案是我的公用方法，那麼我可以把common下的方法一同打包到base.js，這樣就直接一個檔案全域性引用了

webpack.config.js配置如下

entry:{//首先在入口引入公共檔案，取名'common'
    'commom':['./src/page/common/index.js']
    'index':['./src/page/index/index.js'],
    'login':['./src/page/login/index.js']
  },
  output:{
    path:path.resolve(__dirname, 'dist'),
    filename:'js/[name].js'
  },
  plugins:[
    new webpack.optimize.CommonsChunkPlugin({
      name : 'common',//這裡的'common'回去找上面入口處引入的common
      filename : 'js/base.js'
    })
  ]

最後，在這裡記錄一個使用CommonsChunkPlugin時的坑
打包時報錯webpackJsonp is not defined
其實就是你打包的公共模組 base.js並沒有引用，引用時必須放在打包的其他的js檔案的上面