webpack4升级到webpack5的实战经验总结

Webpack 是目前最流行的前端打包工具之一，从早期的1.*版本，到后来的2、3和4版本，Webpack 的稳定性和灵活性都得到了业内的广泛认可，但随着 Web 应用复杂度的不断提高，新特性的不断增加，Webpack 也在不断的优化和升级，最新的Webpack5版本为我们的项目带来了许多新特性和优化点。但是由于Webpack5移除了部分非常常见的功能和用法，因此webpack4迁移到webpack5的过程并不是一件轻松愉快的任务，下面是我个人总结的一些实战经验：

升级前的准备

在升级前，我们需要先了解一些最新的特性和更新点，可以通过Webpack官方文档来了解，以及参考社区的一些博客，了解更新内容和可能存在问题，这对于升级过程中的问题定位和解决具有非常重要的作用。

升级流程

以下是升级流程的简要步骤：

1. 全局安装最新版本的Webpack。

npm install webpack@latest -g

1. 相应的项目依赖安装最新的Webpack。

npm install webpack@latest -D

1. 检查项目中所有依赖模块，确保所有模块都是Webpack5兼容的，包括但不限于：

2. Webpack Loader

3. Webpack Plugin
4. Node Module
5. Babel Plugins

6. ...

7. 更新项目中的Webpack配置文件，主要包括配置项的更改和移除，例如：

8. 移除部分旧的 Loader 和 Plugin

9. 新增模块热替换（HMR）的配置

10. 清理和优化配置文件

11. 在项目中修改相关代码，以使用Webpack5的新特性，例如：

12. 新API方法

13. 资源模块类型和部分资源变量名称
14. 升级需要使用的相关库

以下是两条示例说明：

示例1：移除部分旧的 Loader 和 Plugin，新增HMR配置

在升级Webpack5之前，我们的配置文件可能包括 TerserWebpackPlugin、CleanWebpackPlugin 等常用的 loader 和 plugin，这些在Webpack5中已经被移除或更改，此时需要我们通过Webpack5提供的替代方案来解决。

// webpack.config.js

const TerserWebpackPlugin = require('terser-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [new TerserWebpackPlugin()],
  },
  plugins: [new CleanWebpackPlugin()],
};

我们需要进行如下更改：

// webpack.config.js

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      '...', // 替代方案，如下文提到的WebpackPlugin
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    '...', // 替代方案，如下文提到的webpack-dev-server
  ],
  devServer: {
    contentBase: './dist',
    hot: true, // 开启 HMR 配置
  },
}

示例2：升级需要使用的相关库，使用Resource Module

升级Webpack5之后，许多以前使用的库将不再支持，需要更新为新版或找到替代方案。

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/i,
        // 旧方式，5.x 中废弃
        use: 'script-loader',
      },
      {
        test: /\.css$/i,
        // 旧方式，5.x 中推荐使用的方式使用 Resource Module
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

我们需要进行如下更改：

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/i,
        // 新方式，推荐的使用 Resource Module 的方式
        type: "asset/resource",
        generator: {
          filename: 'static/js/[name].[contenthash].js',
        }
      },
      {
        test: /\.css$/i,
        // 新方式，推荐的使用 Resource Module 的方式
        type: "asset/resource",
        generator: {
          filename: 'static/css/[name].[contenthash].css',
        }
      },
    ],
  },
};

总结

总的来说，Webpack 5版本升级相对于Webpack 4版本来说，解决了许多问题和更加简化的项目配置，同时将重点放在了性能优化、使用体验和安全性等方面，但是升级过程中可能存在一些问题和风险，需要开发者仔细验证和测试，下面介绍一些升级总结的小技巧：

• 确保安装了最新的 Webpack，具体可以参考Webpack官方文档。
• 在升级前，仔细了解最新的特性和更新点，及潜在的问题。
• 更新项目中所有依赖模块，确保兼容Webpack5。
• 对Webpack配置文件进行更新和清理，使用Webpack5提供的新API和配置项，同时移除废弃的Loader和Plugin。
• 在升级过程中，及时测试和验证项目，解决可能存在的问题。