webpack的sourcemap

BSOXDTDTPJHVCKFD發表於2019-03-04
Web

js source map原理

作用：主要用於除錯，現在程式碼都會經過壓縮混淆，這樣報錯提示會很難定位程式碼，sourcemap就是一個資訊檔案，裡面儲存著位置資訊，也就是說，轉換後的程式碼的每個位置，所對應的轉換前的位置(阮老師有詳細解釋)

如何開啟source map？

在打包後的程式碼尾部追加一行：

//@ sourceMappingURL="xxxxx"複製程式碼
souce map的格式
{
    version: 3, // source map的版本，目前為3
    file: "out.js", // 轉換後的檔名
    sourceRoot: "", // 轉換前的檔案所在的目錄，如果與轉換前的檔案在同一目錄，該項為空
    sources: [], // 轉換前的檔案
    names: [], // 轉換前的所有變數名的屬性名
    mappings: "" // 記錄位置資訊的字串
    sourceContents: [] // webpack生成的sourcemap有這一項，裡面是模組原始碼
}複製程式碼

webpack devtool配置

value 作用
eval 每個模組都用eval封裝進行運算，並且在末尾追加註釋 //@ sourceURL
source-map 生成一個sourcemap檔案，並且會在每個bundle檔案末尾追加註釋 // sourcemap=xx.js.map
hiden-source-map 跟上面source-map作用一樣，生成一個sourcemap檔案，只是沒有檔案末尾的註釋，預設查詢xx.js.map檔案
inline-source-map 生成一個base64的sourcemap檔案並註釋追加在每個bundle檔案的末尾
eval-source-map 每個module都用eval封裝運算，並在模組的末尾追加base64的SourceMap
cheap-source-map 生成一個沒有列資訊的sourcemap檔案，不包含loader的sourcemap（程式碼定位的是webpack中配置的loader轉換的程式碼，不是純原始碼）
cheap-module-source-map 生成一個沒有列資訊的sourcemap檔案，同時loader的sourcemap被簡化為只包含對應行的

總結：

  • eval: 每個module用eval封裝進行運算，每個module後配置source-map的dataUrl或者sourceurl
  • source-map: 每個bundle檔案後追加sourcemap的sourceURL或者dataURL，包括行資訊，列資訊，loader也有對應的sourcemap
  • cheap: sourcemap檔案中的mappings中只有對應的行資訊，沒有列檔案，並且沒有對應的loader的sourcemap，對應的都是loader轉換後的程式碼，不是純正的原始碼
  • module: 新增loader的對應的sourcemap
  • inline: 檔案內聯base64的dataURL的sourcemap資訊（不推薦使用，因為這樣會造成原始碼的體積巨大）

以上幾種可以進行隨機搭配，生成適合自己的sourcemap

參考文獻：

相關文章