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

Posted 2021-02-18 苏小米

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/