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

webpack版本升级报错：

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

原因分析：

webpack4 移除了 CommonsChunkPlugin，所以对配置文件要做做相应的修改。

解决办法：

1、注释或者删除配置文件中CommonsChunkPlugin插件相关的配置。

 2、添加optimization配置。optimization位置在plugins、output同一级节点。

optimization: {
  runtimeChunk: {
    name: 'manifest'
  },
  splitChunks: {
    maxInitialRequests: 10,
    cacheGroups: {
      common: {
        name: 'common',
      }
    }
  }
},

 最终效果：

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      maxInitialRequests: 10,
      cacheGroups: {
        common: {name: 'common'}
      }
    }
  },
  plugins: [    
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new VueLoaderPlugin(),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),   
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[chunkhash].css'),
      allChunks: true,
    }),    
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap ? {
        safe: true,
        map: {inline: false},
        autoprefixer: false
      } : {safe: true}
    }),    
    new HtmlWebpackPlugin({
      filename: config.build.index,
      title: 'minzuUniversityII' + timeStamp,
      template: 'index.html',
      favicon: 'src/assets/images/login/favicon.png',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true       
      },      
      chunksSortMode: 'dependency'
    })
]

 项目打包正常