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 のプロジェクトの起動とビルドコマンドは次のようになります：

"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'

V5 以降、webpack-cli/serve を使用して webpack-dev-server の起動コマンドを置き換えます：

対応するスクリプトの変更：

"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

上記のエラーは、v5 のバージョンでは --colors パラメータがサポートされなくなったため、削除する必要があります。

異なるバージョンでサポートされるパラメータについては、公式の Github を参照してください：https://github.com/webpack/webpack-cli/tree/next/packages/webpack-cli#webpack-5

webpack loader#

クエリパラメータを使用して loader のオプションを設定すると、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 およびそれ以前のバージョンには、cypto、buffer、process などのいくつかの node モジュールのポリフィルが付属しています。これらのモジュールをプロジェクトで使用している場合、対応するポリフィルが自動的に適用されます。V5 では、これらのポリフィルが削除されました。使用する場合は、手動で構成ファイルに追加する必要があります：

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

eslint-webpack-plugin の使用#

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/