1.什麼是sourcemap？
webpack打包後的文件會自動添加很多代碼, 在開發過程中非常不利於我們去調試
因爲如果運行webpack打包後的代碼,錯誤提示的內容也是打包後文件的內容
所以爲了降低調試的難度, 提高錯誤代碼的閱讀性, 我們就需要知道打包後代碼和打包之前代碼的映射關係
只要有了這個映射關係我們就能很好的顯示錯誤提示的內容, 存儲這個映射關係的文件我們就稱之爲sourcemap
2.如何開啓sourcemap
https://www.webpackjs.com/configuration/devtool/
2.1在webpack.config.js中添加
devtool: “xxx”,
2.2各配置項說明:
eval:
不會單獨生成sourcemap文件, 會將映射關係存儲到打包的文件中, 並且通過eval存儲
優勢: 性能最好
缺點: 業務邏輯比較複雜時候提示信息可能不全面不正確
source-map:
會單獨生成sourcemap文件, 通過單獨文件來存儲映射關係
優勢: 提示信息全面,可以直接定位到錯誤代碼的行和列
缺點: 打包速度慢
inline:
不會單獨生成sourcemap文件, 會將映射關係存儲到打包的文件中, 並且通過base64字符串形式存儲
cheap:
生成的映射信息只能定位到錯誤行不能定位到錯誤列
module:
不僅希望存儲我們代碼的映射關係, 還希望存儲第三方模塊映射關係, 以便於第三方模塊出錯時也能更好的排錯
2.3企業開發配置:
development: cheap-module-eval-source-map
只需要行錯誤信息, 並且包含第三方模塊錯誤信息, 並且不會生成單獨sourcemap文件
production: cheap-module-source-map
只需要行錯誤信息, 並且包含第三方模塊錯誤信息, 並且會生成單獨sourcemap文件