webpack--webpack.optimize.CommonsChunkPlugin has been removed, please use config.o

webpack4版本前，可以使用webpack內置的JS插件CommonsChunkPlugin來提取第三方庫和公共模塊,避免首屏加載的bundle文件或者按需加載的bundle文件體積過大，從而導致加載時間過長.具體設置如下：

webpack.config.js

module.exports = {
    entry: {
        app: path.join(__dirname, './src/main.js'),
        vendors:['jquery'] //把要抽離的第三方包的名稱，放到這個數組中
    },
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'js/bundle.js'
    },
        plugins:[
            new webpack.optimize.CommonsChunkPlugin({
             name:’vendors’, // 指定要抽離的入口名稱
             filename:’js/vendors.js’  //將來再發布的時候，除了會有一個bundle.js，還會多一個vendor.js文件，里面存放了所有的第三方包

            })
        ]

}        

更多具體設置，可查看：https://segmentfault.com/a/1190000012828879?utm_source=tag-newest

webpack4版本，已經不用webpack.optimize.CommonsChunkPlugin。如果引用，會報下面的錯。

可以在optimization.splitChunks中設置

module.exports = {
    entry: {
        app: path.join(__dirname, './src/main.js'),
        vendors:['vue','vue-router'] //把要抽離的第三方包的名稱，放到這個數組中
    },
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'js/bundle.js'
    },
        module:{},
        plugins:[],
        optimization: {
      minimizer: [new UglifyJsPlugin()],    
      splitChunks: {
        cacheGroups: {
          commons: {
            name: 'commons',//commons里面的name就是生成的共享模塊bundle的名字
            chunks: 'all',
            minChunks: 2
          }
        }
      }
    }
}

具體配置，可以查看：https://webpack.js.org/plugins/split-chunks-plugin/