SourceMap
webpack

webpackでsource-mapを表示できるようにする

More than 1 year has passed since last update.


はじめに

備忘録も兼ねて、webpackでsource-mapを表示する設定を説明します。


devtoolにinline-source-mapを指定しましょう

こんな感じにwebpack.config.jsを設定します。すごい簡単ですね。

{

devtool: 'inline-source-map'
}

ちなみに上記の設定は、ビルドしたjavascriptにsource-mapを書き出すというものです。source-mapの出力先を書かないで済み、手軽なのがいいです。公式サイトを見ると、他にも色々な指定ができるようなので、用途に応じて使い分けるといいと思います。

https://webpack.github.io/docs/configuration.html#devtool


おわりに

手前味噌になりますが、自作ゲームでsource-mapの設定をしたところです。このゲームではgrunt-webpackを使っているので厳密にはwebpack.config.jsではありませんが、大体同じなのでわかると思います。

ソースはここ

https://github.com/kaidouji85/gbraver/blob/e732f88190669adb31a86ebda6cb1cab58667af0/grunt/webpack/index.js

プロジェクト全体のソースはここ

https://github.com/kaidouji85/gbraver/tree/e732f88190669adb31a86ebda6cb1cab58667af0