6 Source Map
6.1 什么是Source Map
Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
Source Map 可以在报错时提示对应的源文件的行号，便于定位错误位置修改错误。
6.2 默认Source Map的问题
开发环境下默认生成的Source Map记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。示意图如下:
6.3 解决默认Source Map的问题
开发环境下，推荐在webpack.config.js中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致:
module.exports = { mode: 'development', // eval-source-map 仅限在"开发模式"下使用，不建议在“生产模式"下使用。 //此选项生成的Source Map 能够保证"运行时报错的行数"与"源代码的行数"保持一致 devtool: 'eval-source-map' , //省略其他配置项... }
6.4 webpack生产环境下的Source Map
在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map 的形式暴露给别有所图之人。
6.4.1只定位行数不暴露源码
在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为
nosources-source-map。实际效果如图所示:
在实际发布的时候，建议大家把 devtool 的值设置为nosources-source-map或直接关闭SourceMap。
6.4.2 定位行数且暴露源码
在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将devtool的值设置为source-map。实际效果如图所示:
6.5 Source Map的最佳实践
开发环境下:
建议把devtool的值设置为eval-source-map
好处:可以精准定位到具体的错误行
生产环境下:
建议关闭Source Map 或将devtool的值设置为nosources-source-map
好处:防止源码泄露，提高网站的安全性
下一篇
webpack ---- 配置完成后的package.json与webpack.config.js & 使用@代替./ …/
