webpack配置中的devtool字段可以允許我們控制sourcemap的生成，提供開發(fā)時候的代碼定位功能

關(guān)于sourcemap可以參考 sourcemap詳解

1. sourcemap關(guān)鍵字

sourcemap關(guān)鍵字如下

• eval
  使用eval包裹代碼模塊（這個代碼塊是轉(zhuǎn)譯后的代碼，并未進行打包和壓縮）
  eval包裹每個代碼塊時候，會在后面增加"sourceURL"（和sourcemap里的"sourceMappingURL"不同）用來定位到原文件。
  eval模式優(yōu)勢在于，它是將每個模塊單獨eval執(zhí)行，因此如果配合source-map使用，就可以單獨緩存每個模塊的sourcemap，這樣就可以在重新構(gòu)建時候?qū)崿F(xiàn)增量修改sourcemap，節(jié)省時間。如果不使用eval模式，就是一個文件（chunk）對應(yīng)一個sourcemap，重新構(gòu)建時候需要將整個chunk的sourcemap重新生成，更耗費時間。
  因此eval模式的優(yōu)勢就在于重新構(gòu)建的速度更快
• source-map
  產(chǎn)生source map
• cheap
  用來修飾source-map
  讓sourcemap只保存行信息，不保存列信息
  讓sourcemap只將打包后的代碼映射到轉(zhuǎn)換過的代碼，不映射到原始源代碼
  【由于源代碼到轉(zhuǎn)譯后的代碼的映射關(guān)系由相應(yīng)的loader提供，因此cheap模式應(yīng)該不需要關(guān)心這部分的sourcemap】
• module
  用來修飾cheap-source-map
  讓sourcemap可以映射到原始源代碼
  【由于源代碼到轉(zhuǎn)譯后的代碼的映射關(guān)系由相應(yīng)的loader提供，因此module模式應(yīng)該會處理這部分sourcemap，以最終得到到原始源代碼的映射】
• inline
  用來修飾source-map
  將.map作為DataURI嵌入，不單獨生成.map文件

2. 常見sourcemap組合

\

品質(zhì)說明

\

• 原始源代碼
  你寫的代碼，未經(jīng)過任何處理
• 轉(zhuǎn)換過的代碼
  經(jīng)過各種loader轉(zhuǎn)譯后的代碼
• 生成后的代碼
  轉(zhuǎn)譯后并經(jīng)過webpack處理，注入webpack運行時代碼后的代碼
• 打包后的代碼
  合成一個chunk后的、壓縮過的代碼

3. 最佳實踐

• 本地開發(fā)環(huán)境使用"eval-cheap-module-source-map"
  這個配置提供到源代碼的的完整映射，方便定位問題，并且不需要通常不必要的行映射，提高了構(gòu)建速度，并且由于使用了eval，重構(gòu)建速度更高
• 測試環(huán)境使用"eval-cheap-module-source-map"
  原因和本地開發(fā)環(huán)境一樣，如果介意內(nèi)聯(lián)sourcemap導(dǎo)致文件過大，可以配置"cheap-module-source-map"
• 線上盡量不使用sourcemap，防止業(yè)務(wù)邏輯暴露。

線上debug

1. 將sourcemap上傳到線上錯誤監(jiān)控系統(tǒng)中，這樣代碼報錯就可以定位到源碼的相應(yīng)位置
2. 將sourcemap上傳到公司內(nèi)網(wǎng)