Webpack5升级指南 - 他山之石

Webpack5 最近发布了正式版，带来了很多优化和新功能，前端工程的构建效率将会大大提升，并且，相比于 Webpack4，v5 的升级也更加平滑，不会有很多破坏性的变更。

Webpack5 最近发布了正式版，带来了很多优化和新功能，前端工程的构建效率将会大大提升，并且，相比于 Webpack4，v5 的升级也更加平滑，不会有很多破坏性的变更。

本次重大发布的整体发展方向如下：

尝试用持久性缓存来提高构建性能。
尝试用更好的算法和默认值来改进长期缓存。
尝试用更好的 Tree Shaking
和代码生成来改善包大小。
尝试改善与网络平台的兼容性。
尝试在不引入任何破坏性变化的情况下，
清理那些在实现 v4 功能时处于奇怪状态的内部结构。
试图通过现在引入突破性的变化来为未来的功能做准备，
尽可能长时间地保持在 v5 版本上。

为了尝试新特性带来的变化，我对一些自己的开源项目进行了依赖升级，本文将对我升级过程中的一些问题的总结。

使用 npm-check-updates 进行依赖升级#

npm-check-updates 插件会自动检查 package.json 里的最新版本，并进行批量升级。

npm install -g npm-check-updates

ncu

ncu 命令会自动检查 package.json 中的依赖的最新版本，并列出可升级依赖。

ncu -u

运行此命令可对 package.json 中的依赖版本进行批量更新至最新版本号。

然后运行 yarn 或者 npm install 安装最新版本。

Typescript 类型#

Webpack4 使用 @types/webpack 来进行类型检查， Webpack 5 从源码中生成 typescript 类型文件。

修改：

yarn remove @types/webpack

webpack-cli#

webpack4.x 的启动项目和 build 命令使用：

"scripts": {
    "start": "webpack-dev-server --config ./config/webpack.config.dev.ts --progress --colors",
    "build": "webpack-cli --config ./config/webpack.config.prod.ts --progress --colors"
  },

运行 npm start，出现如下报错：

Error: Cannot find module 'webpack-cli/bin/config-yargs'

对应 issue：https://github.com/webpack/webpack-dev-server/issues/2424

V5 后，使用 webpack-cli/serve 来代替 webpack-dev-server 的启动命令：

对应的 script 修改为：

"scripts": {
    "start": "webpack-cli serve --config ./config/webpack.config.dev.ts",
    "build": "webpack-cli --config ./config/webpack.config.prod.ts --progress --colors"
  },

命令行参数#

webpack-cli 在 webpack5 的版本中删除和新增了一些命令行参数，运行时会出现如下报错：

--colors

[webpack-cli] Unknown argument: --colors

以上报错就是 --colors 参数在 v5 版本不支持了，需要去掉。

不同版本支持的参数参考官方 Github：https://github.com/webpack/webpack-cli/tree/next/packages/webpack-cli#webpack-5

webpack loader#

使用 query 参数来设置 loader 的 options 会在启动 webpack 时报错如下：

[webpack-cli] Promise rejection: Error: Compiling RuleSet failed: Query arguments on 'loader' has been removed in favor of the 'options' property (at ruleSet[1].rules[5].loader: file-loader?name=images/[name].[hash:5].[ext])
[webpack-cli] Error: Compiling RuleSet failed: Query arguments on 'loader' has been removed in favor of the 'options' property (at ruleSet[1].rules[5].loader: file-loader?name=images/[name].[hash:5].[ext])

{
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        loader: "file-loader",
        //loader: "file-loader?name=images/[name].[hash:5].[ext]",
        options: {
          name: 'images/[name].[hash:5].[ext]',
        },
      }

devtool#

webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

移除 Node.js 模块的 Polyfills#

webpack4 及其之前的版本附带了一些 node 模块的 polyfill，如：cypto、buffer、process 等，如果你的项目中使用到这些模块，则会自动应用相应的 polyfill，V5 版本中，移除了这些 polyfill，如果需要使用则需要手动添加到配置文件：

plugins: [
    new ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
      process: "process",
    }),
]

使用 eslint-webpack-plugin 代替 eslint-loader#

eslint-webpack-plugin 的出现解决了一些 eslint-loader 的问题。
eslint-webpack-plugin 提供了更好的配置方式，生成报告，直接从 eslint 使用缓存，仅仅 lint 修改过的文件。

总的来说，eslint-webpack-plugin 更好用，首次启动速度大大提升。

修改：

yarn add eslint-webpack-plugin -D

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin({
      fix: true,
      lintDirtyModulesOnly: true,
    })],
  // ...
};

babel-polyfill#

在 Babel > 7.4.0 之前，通常我们会安装 babel-polyfill 或 @babel/polyfill 来处理实例方法和 ES + 新增的内置函数，从 Babel 7.4.0 开始，不推荐使用此软件包，而通过直接导入 core-js /stable（以充实 ECMAScript 功能）和 regenerator-runtime /runtime（需要使用转译的生成器函数）：

import "core-js/stable";
import "regenerator-runtime/runtime";

下面直接介绍 transform-runtime 的方式：

安装依赖：

yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
yarn add @babel/runtime-corejs3

.babelrc 配置文件：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": {
          "version": 3,
          "proposals": true
        },
        "useESModules": true
      }
    ]
  ]
}

参考：https://segmentfault.com/a/1190000020237817

参考：https://webpack.js.org/blog/2020-10-10-webpack-5-release/