Error: webpack.optimize.CommonsChunkPlugin has been removed

最近使用webpack 進行react 依賴抽離時發現原本的webpack.optimize.CommonsChunkPlugin已經不能使用了

---

打包時提示

---

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

到官方仔細一看文檔發現

The CommonsChunkPlugin has been removed in webpack v4 legato. To learn how chunks are treated in the latest version, check out the SplitChunksPlugin.

原來是得學着使用SplitChunksPlugin來構建了，

這個更是簡單了，直接在module.exports增加如下案例代碼即可

  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }
  }
  

遺憾的是當時試着將依賴生成多個js文件並未成功