source-map是一个信息文件，存储了转换后每一个代码的位置，在报错信息中心会显示代码报错信息在原始代码中的位置，便于问题定位，提升调试效率。
source-map文件内容：
{
"version":3, //版本信息
"sources":["webpack:///webpack/bootstrap fc177c61f21ce7e0532a"], //转换前的文件
"names":["parentJsonpFunction","window","chunkIds","moreModules",...], //转换后的所有变量名和属性名
"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,...", //记录转换前的代码位置信息
"file":"static/js/manifest.fbd5a3eebc2aaba3cfff.js", //转换后的文件信息
"sourcesContent":[" \t// install a JSONP callback for chunk loadi..."], //转换前的文件内容
"sourceRoot":"" //转换前文件目录，如果转换前后目录一样则为空
}
mappings
- ‘，’： 对应转化的一个内容。
- ‘；’： 对象装转化前的一行内容。
mappings 每一个内容都是 “XXXXX” 五位字段组成。
- 第一位： 对应转换后代码的第几列；
- 第二位： 对应sources属性中的哪个文件；
- 第三位： 对应转换前代码的第几行；
- 第四位： 对应转换前代码的第几列；
- 第五位： 对应names属性中的哪个属性（可省略，并不是每个）；
| 关键字 | 说明 |
|---|---|
| eval | 使用eval包裹模块代码 |
| source-map | 产生.map文件 |
| cheap | 忽略源代码的列信息，也不包含loader的sourceMap |
| module | 包含loader的sourceMap |
| inline | 不生成.map文件，将sourceMap内嵌到js文件中 |
开发环境： 使用内联->更快 cheap-module-eval-source-map
生产环境： 使用外联->减小js文件体积 cheap-module-source-map
