@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

webpack-dev-serverでsource mapが見つからなくて警告がでる

github.com

を使ったJavaScriptプログラムをWebpackでビルドしています。 開発環境では、Google Chromeの開発ツールで次のような警告が表示されます。

f:id:ledsun:20220224212403p:plain
webpack-dev-serverでsource mapが見つからなくてでる警告

小さくて見にくいですね。 node_modules/deepcopy/umd/deepcopy.js.mapをダウンロードしようとして404になっています。

qiita.com

によるとwebpack.config.jsdevtoolオプションを設定すればよさそうです。 実際eval-source-mapを設定すると、この現象は解消されます。

理由はわかりません。npmパッケージに含まれるsource mapを使う代わりに、Webpackが生成したsource mapを使うようになるのかもしれません。

次のオプションも試してみました。

  1. eval
  2. eval-cheap-source-map
  3. eval-cheap-module-source-map
  4. cheap-source-map
  5. cheap-module-source-map
  6. source-map

eval以外ならどれでも解消されました。 オプションは全部で25個あります。 あと4倍も試してられない気持ちになりました。 なぜこんなにたくさんの選択肢があるのでしょうか? そしてそれぞれ何が違うのでしょうか?謎です。

結局、Developmentの章にある、evalの次の候補eval-source-mapを使うことにしました。 ↑のQiitaと同じ結論です。 根本的な解決になっていない感じはしますが、何か問題がおきたときに設定をまた見直そうと思います。