Webpack を v5 に webpack-manifest-plugin を v3 にアップグレードする

Webpack を v5 に webpack-manifest-plugin を v3 にアップグレードする

webpack-manifest-pluginが v3.0.0 にアップデートして Webpack の v5 に対応したので自分のサービスの webpack を v5.11.1、webpack-cli を v4.3.1、webpack-manifest-plugin を v3.0.0 にアップグレードしました。

name	version
webpack	5.11.1
webpack-cli	4.3.1
webpack-manifest-plugin	3.0.0

webpack-manifest-plugin をアップデートすることによる差分

webpack の設定はあまり凝ってなかったこともありほとんど変えないでも大丈夫でしたが、一部webpack-manifest-plugin 周りはちょっと変える必要がありました。

差分は次のとおりです。

- const Manifest = require('webpack-manifest-plugin')
+ const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
module.exports = {
  mode: 'development',
  // 略
  plugins: [
    // 略
-   new Manifest(),
+   new WebpackManifestPlugin({ publicPath: '' }),
  ],
}

ほとんど大したことはしてないのですが、require周りと plugin の option を修正しました。

optionのところが曲者でこれがないと manifest が次のように吐き出されてしまいます。

{
  "app.css": "autoapp.css",
  "app.js": "autoapp.07e61b858bd29646bfb1.js"
}%

何故か auto という文字列が入ってしまいます。この問題に関してはissueが上がっていたのですが、問題は webpack5 の方らしく、webpack5 の migration ガイドの方に書いてありました。

404 errors pointing to URLs containing auto
Not all ecosystem tooling is ready for the new default automatic publicPath via output.publicPath: "auto"
Use a static output.publicPath: "" instead.

ここに書かれている通り option の publicPath に空文字を入れて対応しました。

これで一旦対応を完了しました。webpack5 の方の migration ガイドはちゃんと読まないといけませんね。