webpack优化 - source-map

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