webpack系列文章：
- 【Webpack 性能優化系列(9) - 多程序打包】極大的提升項目打包建構速度！！！
- 【Webpack 性能優化系列(8) - PWA】使用漸進式網絡應用程式為我們的項目添加離線體驗
- 【Webpack 性能優化系列(7) - 懶加載和預加載】
- 【Webpack 性能優化系列(6) - code splitting 】通過代碼分割來擷取更小的 bundle，優化資源加載
- 【Webpack 性能優化系列(5) - tree shaking 】去除未引用代碼，減少代碼體積！！！
- 【Webpack 性能優化系列(4) - 緩存 】詳解如何做bable緩存和檔案資源緩存
- 【Webpack 性能優化系列(3) - oneOf】
- 【Webpack 性能優化系列(1) - HMR 熱子產品替換】
- 【Webpack 生産環境配置】近兩萬字長文總結學習如何提取css為單獨檔案、css的壓縮和相容性處理，如何壓縮html和js、如何做js文法檢查eslint和js相容性處理babel！！！
- 【Webpack 開發環境配置】萬字長文總結學習如何打包樣式資源、html資源、圖檔資源和其他資源？devServer是什麼，如何配置？
- 【Webpack 簡介及五個核心概念】
source-map
本文講一下開發環境下如何調試代碼，解決開發環境下調試代碼問題，這個技術叫
source-map
source-map
: 一種 提供源代碼到建構後代碼映射 技術 （如果建構後代碼出錯了，通過映射可以追蹤源代碼錯誤）
在webpack中啟動
source-map
隻需要在配置中添加：
devtool: 'source-map'
啟動
source-map
後，打包運作就可以在build目錄下看到
built.js.map
，這個檔案就是
source-map
檔案，它提供了源代碼和建構後代碼的映射關系
上面的寫法是
source-map
最基本的寫法
devtool
的模式寫法可以總結為：
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
具體就是有以下幾種模式：
1.source-map：外部
錯誤代碼準确資訊 和 源代碼的錯誤位置
2.inline-source-map：内聯
隻生成一個内聯source-map
錯誤代碼準确資訊 和 源代碼的錯誤位置
3.hidden-source-map：外部
錯誤代碼錯誤原因，但是沒有錯誤位置
不能追蹤源代碼錯誤，隻能提示到建構後代碼的錯誤位置
4.eval-source-map：内聯
每一個檔案都生成對應的source-map，都在eval
錯誤代碼準确資訊 和 源代碼的錯誤位置
5.nosources-source-map：外部
錯誤代碼準确資訊, 但是沒有任何源代碼資訊
6.cheap-source-map：外部
錯誤代碼準确資訊 和 源代碼的錯誤位置
隻能精确的行
7.cheap-module-source-map：外部
錯誤代碼準确資訊 和 源代碼的錯誤位置
module會将loader的source map加入
上述這些模式，其中一些值适用于開發環境，一些适用于生産環境。對于開發環境，通常希望更快速的 source map，需要添加到 bundle 中以增加體積為代價，但是對于生産環境，則希望更精準的 source map，需要從 bundle 中分離并獨立存在。
我們看一下效果：
建構後沒有
built.js.map
檔案
但是會在built.js檔案下面生成
base64
編碼的
source-map
檔案
這種方法是嵌到js中的，是以叫内聯，像前面生成外部
built.js.map
檔案的叫外聯
内聯 和 外部的差別：1. 外部生成了檔案，内聯沒有 2. 内聯建構速度更快
應用場景
前面講了
source-map
的很多種配置方案，到底怎麼用呢？
這裡就需要考慮兩種環境：開發環境和生産環境
開發環境：速度快，調試更友好
速度快(eval>inline>cheap>…)：
eval-cheap-souce-map(首推)
eval-source-map
調試更友好：
souce-map(首推)
cheap-module-souce-map
cheap-souce-map
最終平衡速度和調試，開發環境推薦的方案：
eval-source-map(調試最友好)
eval-cheap-module-souce-map(性能更好)
如果我們使用vue或者react架構開發，都會有對應的腳手架，而腳手架的配置預設是：
eval-source-map
生産環境：源代碼要不要隐藏? 調試要不要更友好？
内聯會讓代碼體積變大，是以在生産環境不用内聯
需要隐藏源代碼的方案：
nosources-source-map(全部隐藏)
hidden-source-map(隻隐藏源代碼，會提示建構後代碼錯誤資訊)
生産環境推薦方案：
source-map(調試最友好)
cheap-module-souce-map(性能更好)
參考
- https://www.bilibili.com/video/BV1e7411j7T5?p=14&spm_id_from=pageDriver
- https://webpack.docschina.org/configuration/devtool/