Help us understand the problem. What is going on with this article?

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

More than 3 years have 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

pegass85
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away