8、Source Map

1、什么是 Source Map

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

2、解决默认 Source Map 的问题

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

module.exports = {
    // 代表webpack的运行模式，可选值：development  和  production
    mode: 'development',
    // 此选项生成的Source Map能够保证"运行时报错的行数"与"源代码的行数保持一致"
    devtool: 'eval-source-map',
    //实际发布的时候，要设置为'noeval-source-map' 或者直接关闭，避免源码外泄
}

3、Source Map 的最佳实践

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