golangの日記

Go言語を中心にプログラミングについてのブログ

webpack devtool ソースマップ

Webpack

javascript.png


ソースマップは TypeScript など、トランスパイル後と前のコードの内容を紐付けしてデバッグしやするするもの。
トランスパイルした後のコードでエラーの場所を示されても、それが元のコードのどの部分なのかが分からないと開発しづらい。
なので、開発中やnpmで公開するライブラリ以外はソースマップは必要ない。





webpack.config.js の devtool で設定する。指定可能な値は string と false

module.exports = {

    devtool: 'source-map',

    ...
}


公式ドキュメントのdevtoolに全部載ってますが、
コンパイル後のファイルに記述される内容と、いつ使うべきものかのまとめです。



(Production) - 製品化するときに指定するもの https://webpack.js.org/configuration/devtool/#production

(Development) - 開発中に指定するもの https://webpack.js.org/configuration/devtool/#development

(Special cases) - 開発にも製品化にも適さない。一部のサードパーティツール用。 https://webpack.js.org/configuration/devtool/#special-cases



eval が使われるもの


  • (none) devtool の項目を設定しない - (Production)
eval("...中略...//# sourceURL=webpack:///./src/index.ts?");


  • eval - (Development)
eval("...中略...//# sourceURL=webpack:///./src/index.ts?");


  • cheap-eval-source-map - (Development)
eval("...中略...//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW...中略...//# sourceURL=webpack-internal:///./src/index.ts");


  • cheap-module-eval-source-map - (Development)
eval("...中略...//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZX...中略...//# sourceURL=webpack-internal:///./src/index.ts");


  • eval-source-map - (Development)
eval("...中略...//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZX...中略...//# sourceURL=webpack-internal:///./src/index.ts");



ファイル( .js.map )が生成されるのも


  • cheap-source-map - (Production / Special cases)
    最後の行にコメントが追記される
//# sourceMappingURL=index.js.map


  • cheap-module-source-map - (Production / Special cases)
    最後の行にコメントが追記される
//# sourceMappingURL=index.js.map


  • source-map - (Production)
    最後の行にコメントが追記される
//# sourceMappingURL=index.js.map


  • nosources-source-map - (Production)
    最後の行にコメントが追記される
//# sourceMappingURL=index.js.map


  • hidden-source-map - (Production)
    ソースマップファイルは出力されるがコメント行はなし



その他


以下は全部、最後の行にコメントでJSONをbase64にしたものが追記される

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJ...

  • inline-source-map - (Special cases)

  • inline-cheap-source-map - (Special cases)

  • inline-cheap-module-source-map - (Special cases)



ソースマップ無し

  • false