一.什么是Sourcemap

Sourcemap是為了解決在實際運行代碼（打包后的）出現問題時，無法定位到開發環境中的源代碼的問題。為了讓資源更小，加載速度更快，在js項目部署之前都會將代碼混淆壓縮，將less、sass 、typeScript 等其他語言編譯成 css 或 JS ，這樣就可以使瀏覽器識別。但是這樣也帶來了影響，當代碼中出現問題時，只能定位到壓縮之后的代碼，出錯以后只會告訴我們第幾行有錯誤。而壓縮之后的代碼一般就只有一兩行，每一行上萬字符，對排除檢查幾乎沒有幫助。而sourceMap的存在就是為了解決這個問題，它幫助我們將壓縮的代碼在控制臺中轉換成源碼。

二.devtool

如果需要啟用Sourcemap，就需要用到devtool。
devtool選項：

(1)eval
每個模塊都使用 eval() 執行，每一個模塊后會增加sourceURL來關聯模塊處理前后的對應關系。如下圖：


由于會映射到轉換后的代碼，而不是映射到原始代碼（沒有從 loader 中獲取 source map），所以不能正確的顯示行數。因為不需要生成模塊的sourcemap，因此打包的速度很快。
js調試使用方法：
在module.exports = {}里配置：devtool:"eval",

(2)source-map
source-map會為模塊生成獨立的soucemap文件。

打包后的模塊在模塊后面會對應引用一個.map文件，同時在打包好的目錄下會生成相應的.map文件。如下圖：

js調試使用方法：
在module.exports = {}里配置：devtool:"source-map",

(3)Inline
與source-map不同，增加inline屬性后，不會生成獨立的.map文件，source map 轉換為 DataUrl 后添加到 bundle 中。如下所示：

(4)cheap
cheap屬性在打包后同樣會為每一個模塊生成.map文件，但是與source-map的區別在于cheap生成的.map文件會忽略原始代碼中的列信息,也不包含loader的sourcemap。

(5)module
包含了loader模塊之間的sourcemap，將 loader source map 簡化為每行一個映射。

css調試
調試css時需要將壓縮css的插件注釋掉

Css sourcemap設置:

總結

以上是生活随笔為你收集整理的4-2 webpack使用mapsource调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。