webpack4→webpack5をして、Module not found: Error: Can't resolveが出た場合、'html-loader'を削除しろ

webpack4→webpack5でハマった

久々のLooxUと初音ミクで行こう！の更新。皆様お久しぶりです。 今回は、webpack4からwebpack5へ移行した際にハマった出来事について記載したいと思います。

事象

Module not found: Error: Can't resolve '/manifest.json'

エラーメッセージとしては、上記の様なメッセージが出ていました。 なんとなく、html-webpack-pluginで呼び出している箇所に問題がありそう。 しかし、その設定を見る限り特に変な書き方とかをしていなかったので、一体何が問題なのかしばらく分かりませんでした。

原因解明

html-webpack-pluginのtemplateのドキュメントを読んでいて、原因に気が付きました。

1) Don't set any loader

これかー！

webpack.config.jsに書いてあった、

module: {
  rules: [
    {
      test: /\.html$/,
      loader: 'html-loader'
    }],
},

この部分を無効化したら無事に解決しました。 いやあ、とんでもない所に落とし穴があるものです（笑）