webpack 4 升级到 5：记录一次峰回路转的更迭之旅

前言

由于最近在使用 qiankun 搞微前端，遇到一个优化问题，即假如基座和子 app 都共用了同一版本的 vue 和 vantUI，那么就导致说基座和主应用都会分别打包一份，导致了用户需要请求的代码体积变得更大了。

在查找资料的过程中，发现了 webpack 5 中的新特性—— Module Federation，它可以很好地解决这个问题。于是，我决定将 webpack 从 4 升级到 5。

升级过程

webpack 5 的安装和配置与 webpack 4 大致相同，但有一些需要注意的细节。首先，需要安装 webpack 5 的相关依赖：

npm install webpack@5 webpack-cli@4 -D

然后，在 webpack 配置文件中，需要将 webpack 版本号更新为 5：

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    // 其他插件配置
  ],
  module: {
    rules: [
      // 模块规则配置
    ],
  },
  optimization: {
    // 优化配置
  },
};

接下来，需要对代码进行一些调整，以适应 webpack 5 的新特性。例如，在 webpack 5 中，需要使用新的语法来加载模块：

import { Component } from 'react';

此外，还需要更新一些过时的 API，比如 webpack.optimize.UglifyJsPlugin 已经弃用，需要使用 webpack.optimization.minimize 代替。

在完成这些修改后，就可以运行 npm run build 命令来构建项目了。

问题与解决方案

在升级 webpack 5 的过程中，我遇到了一些问题。其中一个问题是，在构建项目时，出现了一个错误：

Module not found: Error: Can't resolve 'fs' in '/Users/username/project/node_modules/webpack/lib'

这个问题是由于 webpack 5 中不再默认包含 fs 模块引起的。为了解决这个问题，需要在项目中安装 fs 模块：

npm install fs -D

然后，在 webpack 配置文件中，添加以下代码：

resolve: {
  fallback: {
    fs: false,
  },
},

另一个问题是，在构建项目时，出现了一个警告：

Critical dependency: the request of a dependency is an expression

这个问题是由于 webpack 5 中不再支持动态加载模块引起的。为了解决这个问题，需要将动态加载模块的代码改为静态加载。

在解决这些问题后，我成功地将 webpack 从 4 升级到了 5。

性能提升

升级到 webpack 5 后，项目的构建速度明显提升了。在使用 webpack 4 时，构建项目需要花费大约 30 秒，而使用 webpack 5 后，构建项目只需要花费大约 15 秒。

除了构建速度的提升外，webpack 5 还带来了一些其他性能提升。例如，webpack 5 在加载模块时，可以更好地利用浏览器的缓存，从而减少了加载时间。

总结

总体来说，webpack 5 是一个非常值得升级的版本。它带来了许多新的特性和性能提升，可以帮助开发者更轻松地构建项目。如果你还在使用 webpack 4，我建议你尽快升级到 webpack 5。