【webpack】source mapに指定されるdomainやpathを変更する

3958 ワード
es2015 JavaScript SourceMap webpack JavaScript テキストリンク

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が何なのか？この方法がどう使えるのかはまた別で記事書きます。