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/