详解webpack4升级指南以及从webpack3.x迁移

Webpack是一个非常强大的打包工具，它的主要作用是帮助开发者将多个模块打包成一个或多个JavaScript文件以供使用。随着Webpack的不断发展和更新，Webpack4成为了目前最新的版本，相对于Webpack3，它带来了许多重大改变。接下来，我们来详细分析一下Webpack4升级指南，以及从Webpack3.x迁移的一些注意事项。

一、Webpack4升级指南

1.升级Node.js版本

在升级Webpack4之前，你需要先确保你的Node.js版本符合Webpack4的要求。Webpack4要求Node.js的最低版本是8.9.4，因此你需要升级Node.js到这个版本或更高版本。

2.更改安装命令

因为Webpack4与Webpack3有很大的不同，因此在安装Webpack4时，你需要使用新的安装命令：

npm install webpack webpack-cli --save-dev

注：在webpack3中，安装webpack时默认安装了webpack-cli，所以不需要再单独安装webpack-cli了，但在webpack4中，webpack-cli已经成为了一个必需的依赖。

3.更改配置文件

Webpack4与Webpack3的配置文件有很大的不同，所以在升级前需要更改你的配置文件。

或者你可以使用新的默认配置：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

这是Webpack4中的默认配置文件，它将entry设置为'./src/index.js'，将output设置为'bundle.js'，并且将其打包到'dist'目录中。

4.更改loader配置

在Webpack3中，你需要将loader配置为一个对象，例如：

module: {
  rules: [{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['es2015', 'react']
      }
    }
  }]
}

但在Webpack4中，你需要将loader配置为一个数组，例如：

module: {
  rules: [{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: ['babel-loader']
  }]
}

5.更改plugins配置

在Webpack3中，你需要将plugins配置为一个对象，例如：

plugins: [
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true
  })
]

但在Webpack4中，你需要将plugins配置为一个数组，例如：

plugins: [
  new UglifyJsPlugin({
    sourceMap: true
  })
]

注意：在Webpack4中，你需要先从'webpack'库中导入插件，然后再将它们添加到plugins数组中。

二、从Webpack3.x迁移

1.更改CommonsChunkPlugin为optimization.splitChunks

在Webpack3中，你可以使用CommonsChunkPlugin来提取公共模块，例如：

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function(module) {
        return module.context && module.context.indexOf('node_modules') !== -1;
    }
  })
]

但在Webpack4中，你需要使用optimization.splitChunks配置来实现相同的功能，例如：

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

2.更改NoEmitOnErrorsPlugin为optimization.noEmitOnErrors

在Webpack3中，你可以使用NoEmitOnErrorsPlugin来在编译错误时跳过输出阶段，例如：

plugins: [
  new webpack.NoEmitOnErrorsPlugin()
]

但在Webpack4中，你需要使用optimization.noEmitOnErrors配置来实现相同的功能，例如：

optimization: {
  noEmitOnErrors: true
}

3.更改UglifyJsPlugin为optimization.minimize

在Webpack3中，你可以使用UglifyJsPlugin来压缩代码，例如：

plugins: [
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true
  })
]

但在Webpack4中，你需要使用optimization.minimize配置来实现相同的功能，例如：

optimization: {
  minimize: true
}

总结

Webpack4相对于Webpack3带来了很多重大的改变，所以在升级前需要仔细检查并更改你的配置文件和代码。同时要记得备份你的代码和配置文件，以防意外情况。希望本文能够对你进行Webpack4升级和迁移有所帮助。