Source Map

1.什么是Source Map

Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map文件中存储着代码压缩混淆前后的对应关系。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

2. webpack 开发环境下的Source Map

在开发环境下，webpack默认启用了Source Map功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码。

2.1 默认Source Map 的问题

开发环境下默认生成的Source Map，记录的是生成后的代码的位置 。会导致运行时报错的行数与源代码的行数不一致的问题。

2.2 解决默认Source Map 的问题

开发环境下，推荐在webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致:

devtool: 'eval-source-map',

3. webpack 生产环境下的Source Map

在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map的形式暴露给别有所图之人。

3.1 只定位行数不暴露源码

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。

devtool: 'nosources-source-map'

3.2 定位行数且暴露源码

在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将devtool的值设置为source-map。

4. Source Map的最佳实践

1. 开发环境下:
   ●建议把 devtool的值设置为eval-source-map
   ●好处:可以精准定位到具体的错误行
2. 生产环境下:
   ●建议关闭Source Map或将devtool的值设置为nosources-source-map
   ●好处:防止源码泄露，提高网站的安全性