Help us understand the problem. What is going on with this article?

webpack 5にアップデート

webpackを ^4.44.0 -> ^5.0.4にマイグレーションしましたので、
その際の作業の覚書です。

migrationの仕方

https://webpack.js.org/migrate/5/
基本的に上記の公式を読みつつ、エラーが出たらその都度エラー文を元に対応していく形で進めました。
元々のwebpackの設定にもよって対応も変わってくるかと思いますが、
主要な変更箇所と実際に私が変更した箇所を紹介しておきます。

loaderとuseの厳格化

【参考】 https://blog.hiroppy.me/entry/webpack5
rules.loaderrules.useの使用ルールが厳格になったことで、
環境によってはエラーとなる可能性があります。
optionsを使用しない場合は use
optionsを使用する場合はloaderとなるように設定を見直しましょう。

optionsのアップデート

今回のアップグレードでいくつかのoptionsはoutdatedとなり、他のものに変える必要があります。

(以下、公式から)

  • optimization.hashedModuleIds: true ↦ optimization.moduleIds: 'hashed'
  • optimization.namedChunks: true ↦ optimization.chunkIds: 'named'- ・optimization.namedModules: true ↦ optimization.moduleIds: 'named'
  • NamedModulesPlugin ↦ optimization.moduleIds: 'named'
  • NamedChunksPlugin ↦ optimization.chunkIds: 'named'
  • HashedModulesPlugin ↦ optimization.moduleIds: 'hashed'
  • optimization.noEmitOnErrors: false ↦ optimization.emitOnErrors: true
  • optimization.occurrenceOrder: true ↦ optimization: { chunkIds: 'total-size', moduleIds: 'size' }
  • optimization.splitChunks.cacheGroups.vendors ↦ optimization.splitChunks.cacheGroups.defaultVendors
  • Compilation.entries ↦ Compilation.entryDependencies
  • serve ↦ serve is removed in favor of DevServer

私の場合は NamedModulesPluginを使用していたため、その設定を見直しました。
これはHMR(ホットモジュールリロード) のためのoptionsですが、指示通りoptimizationの設定に変更しました。

webpack.config.js
  plugins: [
-   new webpack.NamedModulesPlugin(),
    ...
  ],
  optimization: {
+    moduleIds: 'named',
+    ...
  }

しかし、その後の公式の文にこんなものが。

Consider removing optimization.moduleIds and optimization.chunkIds from your webpack configuration. The defaults could be better, because they support long term caching in production mode and debugging in development mode.

(雑訳)optimize.moduleIdsoptimization.chunkIdsの設定を削除することを検討してください。
デフォルトだとproductionモードでは長めのキャッシュを、developmentモードではデバックをサポートしますよ。

😕

ということで、色々検討した結果moduleIdsも外すことにしています...

webpack.config.js
  optimization: {
-    moduleIds: 'named',
     ...
  }

その他細かい設定

When using [hash] placeholder in webpack configuration, consider changing it to [contenthash]. It is not the same, but proven to be more effective.
If you are using Yarn's PnP and the pnp-webpack-plugin, we have good news: it is supported by default now. You have to remove it from the configuration.
If you are using IgnorePlugin with a regular expression as argument, it takes an options object now: new IgnorePlugin({ resourceRegExp: /regExp/ }).
If you are using node.something: 'empty' replace it with resolve.fallback.something: false.

file-loader

色々ありますが、 私は [hash]をfile-loaderで使用していたので
[contenthash]に変える作業が発生しました。
また、file-loaderはクエリでのoption指定からoptionsでの指定にかわったようなので、こちらも調整します。

webpack.config.js
  module: {
    rules: [
      {
         ...
         test: /\.(jpe?g|png|gif|svg)$/i,
-        loader: 'file-loader?name=css/img/[name].[ext]?[hash]',
+        loader: 'file-loader',
+        options: {
+           name: 'css/img/[name].[ext]?[contenthash]',
+        },
      ...

IgnorePlugin

IgnorePluginの指定方法も変わっていますので、
設定されている場合はそちらの記述も変更します。
私はmoment.jsのために使用していたので記述を変更しました。(そもそもmoment.jsやめないとなあ...)

webpack.config.js
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new webpack.IgnorePlugin(
+      {
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      },
+    ),

古いパッケージやエコシステムの見直しを

私の環境ではoptimize-css-assets-webpack-pluginが原因でエラーとなっている部分がありました。
"optimize-css-assets-webpack-plugin": "^3.2.1", だったので、
"optimize-css-assets-webpack-plugin": "^5.0.4" に変更したところエラーが解消されました。
この辺も一通り見直さないといけないですね。

俺たちの戦いはこれからだ!

上記作業で一通り動作の問題なさそうなものの、 deprecationWarningがめっちゃ出てます。
こちらも見直さなければ....
余裕があればその解消の作業も追記していきます。

最後に、公式手順にlevel別stepがのっていましたのでざっくり意訳しておきます。
公式ではLevel7までありますが、最低でも3 or4レベルまで繰り返してとのことです。

Level1.  スキーマバリデーションエラー。BREAKING CHANGE: 
といったエラーや、代替オプションにしたがってoptionを変更すること!

Level2.  webpackエラー。エラーメッセージをよめ!エラーメッセージが全て教えてくれる。

Level3.  ビルドエラー。BREAKING CHANGE: といったエラーが出ているはず。 読め。

Level4.  ビルドワーニング。 ワーニングメッセージは改善点を示してくれます。
irico
新米フロントエンドエンジニアです。 得意なのはギターを弾くこと、苦手なことは運動です。 ゲーム(特にノベル物)が趣味です🎮
wiz_inc
Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です
http://012grp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away