背景

问题描述

报错内容

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

复现

问题是项目在升级了 webpack 到 v4.0.0 后，打包生产环境文件，报错走不下去。
至于 CommonsChunkPlugin 的作用和用法，参考这篇博客《详解 CommonsChunkPlugin 的配置和用法》

CommonsChunkPlugin 主要是用来提取第三方库和公共模块，避免首屏加载的 bundle 文件或者按需加载的 bundle 文件体积过大，从而导致加载时间过长，着实是优化的一把利器。

解决办法

1. build/webpack.base.conf.js 文件

• 增加如下代码，与 resolve,output 平级

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        name: 'commons',
        chunks: 'initial',
        minChunks: 2
      }
    }
  }
}

• 注释一行代码：new webpack.optimize.CommonsChunkPlugin('common.js')

plugins: [// new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.ProvidePlugin({
    $:"jquery",
    jQuery:"jquery"
  })
]