webpackのsourceMapオプションの分析

その理由と方法

sourceMap は、開発者がバグのあるコードの正確な位置を特定するのに役立ちます。

module.exports = {
 devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map'
}

、eval：変換されたコードへのマップ

evalは、文字列式の値を計算するために使用されるJavascriptの組み込み関数です。

//例1
eval("2+3"); // 5
//例2
foo = 4;
console.log(eval('foo + 2')); // 6

デメリット

「元のコードではなく、変換後のコードにマッピングされるため、行数が正しく表示されません。

eval-source-map: 元のコードにマップします。

特徴

• ソース・マップの初期化は遅いですが、再構築時のスピードは速くなります。
• 実際のファイルを生成します。元のコードにマップされた行が正しくマップされます。

  

eval-cheap-source-map: eval-source-map に似ていますが、行数のみをマップし、列数はマップしません。

上記のオプションは本番環境では使用できません。

hidden-source-map

の機能は

, hidden-source-map

機能

• source-map と同じですが、バンドルに参照アノテーションを追加しません。
• このオプションは、バグレポートに由来するエラースタック追跡情報をソースマップにマップさせたいだけで、ブラウザ開発ツールにソースマップを公開したくない場合に便利です。

nosources-source-map

機能

• 生成されるマップファイルにはソースコードは含まれませんが、不正な行の数は正しく表示されます。
• また、プロジェクトのディレクトリ構造とファイル名がソースパネルに表示されます。