source-map是一個信息文件，存儲了轉(zhuǎn)換后每一個代碼的位置，在報錯信息中心會顯示代碼報錯信息在原始代碼中的位置，便于問題定位，提升調(diào)試效率。
source-map文件內(nèi)容：
{
"version":3, //版本信息
"sources":["webpack:///webpack/bootstrap fc177c61f21ce7e0532a"], //轉(zhuǎn)換前的文件
"names":["parentJsonpFunction","window","chunkIds","moreModules",...], //轉(zhuǎn)換后的所有變量名和屬性名
"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,...", //記錄轉(zhuǎn)換前的代碼位置信息
"file":"static/js/manifest.fbd5a3eebc2aaba3cfff.js", //轉(zhuǎn)換后的文件信息
"sourcesContent":[" \t// install a JSONP callback for chunk loadi..."], //轉(zhuǎn)換前的文件內(nèi)容
"sourceRoot":"" //轉(zhuǎn)換前文件目錄，如果轉(zhuǎn)換前后目錄一樣則為空
}
mappings
- ‘，’： 對應(yīng)轉(zhuǎn)化的一個內(nèi)容。
- ‘；’： 對象裝轉(zhuǎn)化前的一行內(nèi)容。
mappings 每一個內(nèi)容都是 “XXXXX” 五位字段組成。
- 第一位： 對應(yīng)轉(zhuǎn)換后代碼的第幾列；
- 第二位： 對應(yīng)sources屬性中的哪個文件；
- 第三位： 對應(yīng)轉(zhuǎn)換前代碼的第幾行；
- 第四位： 對應(yīng)轉(zhuǎn)換前代碼的第幾列；
- 第五位： 對應(yīng)names屬性中的哪個屬性（可省略，并不是每個）；
| 關(guān)鍵字 | 說明 |
|---|---|
| eval | 使用eval包裹模塊代碼 |
| source-map | 產(chǎn)生.map文件 |
| cheap | 忽略源代碼的列信息，也不包含loader的sourceMap |
| module | 包含loader的sourceMap |
| inline | 不生成.map文件，將sourceMap內(nèi)嵌到j(luò)s文件中 |
開發(fā)環(huán)境： 使用內(nèi)聯(lián)->更快 cheap-module-eval-source-map
生產(chǎn)環(huán)境： 使用外聯(lián)->減小js文件體積 cheap-module-source-map
