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

Date:

Share post:

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

package.jsonに1行だけ

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モードは文字通り開発用です。本番ビルドコマンドには追加しないでください。

たろう
たろう
フロントエンドエンジニア。

Related articles

MTの再構築について

今まで知らずにいたのでお恥ずかしい話で...

購買意欲を掻き立てるカラー

普段から心理学の本などを読むのが好き...

Laravel: fakerのandReturnU...

以前「Laravel:mockにおけ...

クリエイターとして知っておきたい人間の主な知覚・心...

人が使うモノ・サービスを作るにあたり...