source map顧名思義，就是程式碼地圖，為什麼會有這個東西呢，具體的起源等有時間在追溯（知道是谷歌開發的，chorm是支援的），先看看這個東西是怎麼用的，有什麼用。
提到source map，說的最多的是javascript source map，其實並不僅僅是javascrip程式需要生成source map，
其他的程式碼也需要，比如css（尤其是對於一個大型的前端樣式庫，比如bootstrap等）。
現代javascript程式越來越複雜，尤其是模組化後，一個javascript程式是由很多檔案構，為了讓瀏覽器支援這個複雜的js程式，必須使用開發平臺的各種構建工具比如webpack，gulp等等對js程式進行壓縮，減少體積；合併，減少HTTP請求的次數；甚至是轉換，比如把TypeScript轉換成標準的javascript。
這樣就導致，在瀏覽器中實際執行的javascript程式碼跟實際的源程式的脫節，這樣給除錯程式打來問題，瀏覽器中的錯誤提示可能很難定位到具體的程式中。
使用less開發的css檔案，合併壓縮後，也有類似的問題，這時候就需要source map檔案 簡單說，
Source map就是一個資訊檔案，裡面儲存著位置資訊。也就是說，轉換後的程式碼的每一個位置，所對應的轉換前的位置。 有了它，出錯的時候，除錯工具將直接顯示原始程式碼，而不是轉換後的程式碼。這無疑給開發者帶來了很大方便。 比如構建工具，在生成app.js的同時，生成一個sourcemap檔案app.js.map，
當 webpack 打包原始碼時，可能會很難追蹤到錯誤和警告在原始碼中的原始位置。
例如，如果將三個原始檔（a.js, b.js 和 c.js）打包到一個 bundle（bundle.js）中，
而其中一個原始檔包含一個錯誤，那麼堆疊跟蹤就會簡單地指向到 bundle.js。這並通常沒有太多幫助，因為你可能需要準確地知道錯誤來自於哪個原始檔。
為了更容易地追蹤錯誤和警告，JavaScript 提供了 source map 功能，將編譯後的程式碼對映回原始原始碼。如果一個錯誤來自於 b.js，source map 就會明確的告訴你。
webpack 的source map 有很多不同的選項可用，請務必仔細閱讀它們，以便可以根據需要進行配置。
CSDN
原文：https://blog.csdn.net/wanhongbo029/article/details/84135076
剛詳細的介紹 參考：http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html