webpack的sourcemap

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

參考文獻：

• www.ruanyifeng.com/blog/2013/0…
• juejin.im/post/582935…
• segmentfault.com/a/119000000…