webpackのトランスパイル等でjsを生成するときsource mapを出力することができますが、
source mapで指定されるdomainやpathを変更する方法を知ったので記事書きます。
設定方法はドキュメントがありました。
https://github.com/webpack/docs/wiki/configuration#outputdevtoolmodulefilenametemplate
やりたいこと
webpack://となってしまうのを変更したい。
例えばこうなるのを
こんな感じにしたい
設定方法
webpack.config.jsでoutput.devtoolModuleFilenameTemplateを設定します。
今回は以下のように設定しました。
output: {
//・・・
devtoolModuleFilenameTemplate: 'src/[resource-path]',
},
自由に変更したい場合は、以下のページを参考に src と書いたあたりを自由に変更するといいです。
参考：
https://github.com/webpack/docs/wiki/configuration#outputdevtoolmodulefilenametemplate
sourceMap抜粋
設定なし
{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap aa8079d35e035494576e","webpack:///./sub.js","webpack:///./main.js"],・・・
設定後
{"version":3,"sources":["src/webpack/universalModuleDefinition","src/webpack/bootstrap c0cbd02b78933164b9eb","src/./sub.js","src/./main.js"],・・・
サンプルプロジェクト
は、こちら
https://github.com/ota-meshi/webpack-devtool-module-filename-template-sample
何がうれしいの？
別にwebpack://でいいじゃん。何が困るの？って感じですが、
私はremap-istanbulがうまくreportが出なくて、この方法を探しました。
remap-istanbulが何なのか？この方法がどう使えるのかはまた別で記事書きます。