1、source map 源碼地圖–解決報錯調試問題
本小節的知識與 webpack 無關
前端發展到現階段，很多時候都不會直接運行源代碼，可能需要對源代碼進行合併、壓縮、轉換(eg:ts轉js)等操作，真正運行的是轉換後的代碼
這就給調試帶來了困難，因爲當運行發生錯誤的時候，我們更加希望能看到源代碼中的錯誤，而不是轉換後代碼的錯誤
jquery壓縮後的代碼：https://code.jquery.com/jquery-3.4.1.min.js
爲了解決這一問題，chrome瀏覽器率先支持了source map，其他瀏覽器紛紛效仿，目前，幾乎所有新版瀏覽器都支持了source map
2、source map原理
source map實際上是一個配置，配置中不僅記錄了所有源碼內容，還記錄了源碼和轉換後的代碼的對應關係
下面是瀏覽器處理source map的原理
最後瀏覽器會請求兩個文件：運行的文件 和 源碼地圖
3、source map源碼地圖使用
- source map 應
在開發環境中使用，作爲一種調試手段 - source map 不應該在生產環境中使用，
source map的文件一般較大，不僅會導致額外的網絡傳輸，還容易暴露原始代碼。即便要在生產環境中使用source map，用於調試真實的代碼運行問題，也要做出一些處理規避網絡傳輸和代碼暴露的問題。
webpack中的source map
使用 webpack 編譯後的代碼難以調試，可以通過 devtool 配置來優化調試體驗
webpack.confit.js文件：
module.exports = {
mode:'development',
devtool:none
}
- 如果
沒有配置devtool：
mode:'development'默認報錯方式是eval()方式，瀏覽器顯示錯誤的時候只顯示eval()裏那一部分
最運行沒有影響，只是給瀏覽器看的，是瀏覽器的一種調試手段
mode:'production'默認報錯方式是none有錯，直接指到main.js，沒有具體的提示 - 配置devtool
具體詳見： devtool 配置文檔