【Webpack】ソースマップを出力する

WebpackでバンドルしたJS/CSSファイルを実行すると、コンソールのエラーなども変換後の要素が表示されます。ファイルの行数や関数・変数名も全然違うものになっていて検証ツールが使いにくいことこの上ありません。
これらを解決してくれるすごいやつがソースマップです。設定を１行変えるだけで開発を便利に、快適になります！

package.jsonに１行だけ

scripts内のwebpackコマンドの後ろに下の内容を追加します。

--mode=development --devtool=source-map

下の例では npm run watch の時にソースマップを出力するように変更しました。

"scripts": {
	"build": "webpack",
	//変更前 "watch": "webpack --watch
	"watch": "webpack --watch --mode=development --devtool=source-map"
},

ビルド後、検証ツールのコンソールログやエレメンツのスタイルに変換前のファイル名と行数が表示されていたらOKです。

developmentは開発用！

developmentモードは文字通り開発用です。本番ビルドコマンドには追加しないでください。