More than 1 year has passed since last update.

webpackでdevtoolにsource-mapを指定したのにブラウザで確認できないとき

Posted at 2022-01-23

webpackでバンドルしたファイルのsource mapを生成したい時はwebpack.config.jsのdevtoolプロパティの値を変更します。

webpack.config.js

  devtool: 'source-map'

値によってはプロダクションビルド時にも生成されてしまうので注意です。

ただしsource mapファイルを生成しただけではブラウザのdev toolで確認することができません。
ブラウザ側の設定も必要です。

例えばChromeだと
Prefecences -> Sources -> Enable JavaScript source maps
にチェックを入れることでSourceタブ内のファイルツリー内（バンドルファイルの出力先ディレクトリの配下）にコンパイル前のファイルが表示されます。