Vue-cli项目升级到webpack4.0

对之前开发的项目升级webpack4.0的一个总结。

1. 先升级webpack的版本

npm install webpack@latest webpack-cli -D

升级成功后，我们会发现，package.json文件中的webpack版本以及变成4.0以上。接下来将我们使用的插件和·loader·全部升级到最新的版本。
执行的命令是:

npm install loadername@latest -D

请根据自己使用的插件和loader进行升级操作。

升级完成之后，接下来我们来修改配置文件:

webpack.dev.conf.js文件

由于webpack4采用了mode选项来区分开发环境和生产环境，因此，我们需要在webpack.dev.conf.js文件中设置mode属性。并且将NamedModulesPlugin和NoEmitOnErrorsPlugin两个插件注释掉。因为webpack4开启development模式已经默认使用它们了。

const devWebpackConfig = merge(baseWebpackConfig, {
   
  mode: 'development',
  // ....
  plugins: [
    //...

    // 更新到webpack4 需要注释掉这两个插件
    // new webpack.NamedModulesPlugin(),
    // new webpack.NoEmitOnErrorsPlugin(),
  ]
})

webpack.prod.conf.js

webpack.prod.conf.js文件中需要设置mode选项，将mode的选项值设置成'production',

• new NoEmitOnErrorsPlugin(),
• new ModuleConcatenationPlugin(),
• new DefinePlugin({ “process.env.NODE_ENV”: JSON.stringify(“production”) })
• new UglifyJsPlugin()

以上的这些插件全部注释掉，因为webpack4的 production模式下已经默认引用了这些插件。
而webpack4最大的变化就是弃用了CommonsChunkPlugin，而采用了 optimization.splitChunks 选项。因此，我们需要移除掉与CommonsChunkPlugin有关的所有配置。最终，webpack.prod.conf.js文件变成这样:

const webpackConfig = merge(baseWebpackConfig, {
   
  mode: 'production',

  // ....

  // 此配置用来替代plugin里面的配置
  optimization: {
   
    minimizer: [
      // 压缩代码
      new UglifyJsPlugin({
   
        cache: true,
        parallel: true,
        sourceMap: config.build.productionSourceMap,
      }