什么是SourceMap

什么是SourceMap？

我们在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩，去掉多余的空格，且babel编译化后，最终会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有bug的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发不好调式，因此sourceMap出现了，它就是为了解决不好调式代码问题的。

在项目开发完进行打包后，在打包的文件夹里通常除了js，css,图片字体等资源文件外，大家一定还见过xxx.js.map的文件。这种带map后缀的文件就是Source Map文件——它保存了源代码和转换之后代码（通常经过压缩混淆和其他转换）的关系。
下图展示了部分打包之后生成的Source Map文件:

常见的转换过程包括但不限于：

• 压缩混淆（UglifyJS）
• 编译（TypeScript, CoffeeScript)
• 转译（Babel）
• 合并多个文件，减少带宽请求。

经过上述转换过程的代码，往往都会变得面目全非，就像下面这样:

这样虽然对带宽很友好，但是调试起来就不是那么轻松了。我们在代码出错的时候，肯定最希望能定位其在源码中的位置。所以可以利用SourceMap插件。

使用SourceMap前：

使用SourceMap，配置后：