弄懂 SourceMap，前端开发提效 100%

一、什么是 Source Map
通俗的来说， Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系。关于 Source Map 的解释可以看下 Introduction to JavaScript Source Maps[7]。
我们线上的代码一般都是经过打包的，如果线上代码报错了，想要调试起来，那真是很费劲了，比如下面这个例子：
使用打包工具 Webpack ，编译这一段代码
console.log('source map!!!')
console.log(a); //这一行肯定会报错

浏览器打开后的效果：

点击进入报错文件之后：

这根本没法找到具体位置以及原因，所以这个时候， Source Map 的作用就来了， Webpack 构建代码中，开启 Source Map ：

然后重新执行构建，再次打开浏览器：

可以发现，可以成功定位到具体的报错位置了，这就是 Source Map 的作用。需要注意一点的是， Source

弄懂 SourceMap，前端开发提效 100%最先出现在Python成神之路。