一、sourcemap是什么

首先，sourcemap是一個(gè)存儲(chǔ)了轉(zhuǎn)換前后位置信息的獨(dú)立map文件，這個(gè).map格式的文件與源文件在同一個(gè)目錄下。

二、為什么用sourcemap

在開(kāi)發(fā)完整之后，我們通常會(huì)對(duì)代碼進(jìn)行轉(zhuǎn)換：
常見(jiàn)的幾種代碼轉(zhuǎn)換：
1、壓縮，減體積；
2、合并，少請(qǐng)求；（多個(gè)文件合并成一個(gè)文件，以減少http請(qǐng)求）
3、其他語(yǔ)言編譯為javascript
毫無(wú)疑問(wèn)，代碼轉(zhuǎn)換會(huì)導(dǎo)致運(yùn)行代碼和開(kāi)發(fā)代碼出現(xiàn)差異，從而導(dǎo)致debug困難，sourcemap的啟用很好的解決了這種問(wèn)題，它將運(yùn)行代碼和開(kāi)發(fā)代碼的位置對(duì)應(yīng)起來(lái)，通過(guò)這個(gè)位置關(guān)系我們可以方便的debug。
這就是使用sourcemap的意義。

三、怎么用sourcemap

1、傳統(tǒng)方式：只需在轉(zhuǎn)換后的代碼尾部添加//@ sourceMappingURL=map文件地址即可
2、Webpack中sourcemap的配置

sourcemap配置.png

從官網(wǎng)的這張截圖可以發(fā)現(xiàn)雖然配置模式很多，但是都是以下幾個(gè)項(xiàng)目的組合：
（1）eval：使用eval包裹模塊代碼
（2）cheap：不包含列信息
（3）source-map：產(chǎn)生.map文件
（4）module：包含loader的sourcemap
（5）inline：將.map作為DataURI嵌入，不單獨(dú)生成.map文件（這個(gè)配置項(xiàng)比較少見(jiàn)）
（6）hidden：
（7）nosources：

參考文章：
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
https://segmentfault.com/a/1190000008315937