webpack5構建之——devtool:source-map

source-map

一種提供源代碼到構建后代碼映射 技術（如果構建后代碼出錯了，通過映射可以追蹤源代碼錯誤）

[inline-|hidden-|eval_][nosources-][cheap-[module-]]source-map

source-map:外部
錯誤代碼准確信息和源代碼的錯誤位置
inline-source-map:內聯
只生成一個內聯source-map,錯誤代碼准確信息和源代碼的錯誤位置
hidden-source-map:外部
錯誤代碼錯誤原因，但是沒有錯誤位置，不能追蹤源代碼錯誤，只能提示到構建后代碼的錯誤位置
eval-source-map:內聯
每一個文件都生成對應的source-map,都在eval
錯誤代碼准確信息 和 源代碼的錯誤位置
nosources-source-map:外部
錯誤代碼准確信息，但是沒有任何源代碼信息
cheap-source-map：外部
錯誤代碼准確信息 和源代碼的錯誤位置
只能精確到行
cheap-module-source-map:外部
錯誤代碼准確信息 和源代碼的錯誤位置
module會將loader的source-map加入

內聯和外部的區別：
1、外部生成了文件，內聯沒有
2、內聯構建速度更快

開發環境
速度快
（eval>inline>cheap>...）
eval-cheap-source-map
eval-source-map
調試更友好
souce-map
cheap-module-souce-map
cheap-souce-map
開發環境推薦使用eval-source-map:內聯vue和react腳手架默認使用

生產環境中：
1、如果要隱藏源代碼，使用nosources-source-map或hidden-source-map
2、如果要調試更友好的情況下，使用source-map

注意：生產環境中一般不使用內聯方式，因為會使代碼體積變得非常大，推薦使用外聯

**推薦排序** --> source-map / cheap-module-source-map

nosources-source-map 源代碼全部隱藏

hidden-source-map 只隱藏源代碼，會提示構建后代碼錯誤信息