最近在学webpack，遇到一个从未见过的名词source map。便跑去百度了一番，对其有了一些了解。好记性不如烂笔头，在此记录一下，方便以后查询。
一：source map长啥样？
之前下载Jquery的时候发现有一个文件，叫做Jquery.min.map文件。这就是一个source map 文件。打开后他是这样的：
二：source map有啥作用？
source map是一个独立的文件，与源码在同一个目录下。它有一个很有用的功能，下面就来聊聊这个功能。
1、从源码转换说起
JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。
常见的源码转换，主要是以下二种情况：
（1）压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。
（2）多个文件合并，减少HTTP请求数。
拿Jquery.js举例，它压缩后是长这个样子的：
系统正常运行的时候到不觉得有啥问题，但在出错需要debug的时候就会发现困难重重。
当js解析器告诉你错误在第几行第几列的时候，这些信息对你没有任何用处。还是拿Jquery举例。
jQuery 1.9压缩后只有3行，每行3万个字符，所有内部变量都改了名字。你看着报错信息，感到毫无头绪，根本不知道它所对应的原始位置。当然如果你是超级大牛，非要对着压缩后的js文件进行查错，我只想问一句：给抱大腿不？以上说的种种，就是source map 想要解决的问题。
2、source map 如何解决我们的问题
简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。
三、浏览器设置 source map功能
在Developer Tools的Setting设置中，确认选中"Enable source maps"。
四、如何启用 source map
只需要在压缩后的js文件末尾添加该行代码即可。
//@ sourceMappingURL=/path/to/file.js.map
如：在 jquery.min.js 文件中添加此行 //@ sourceMappingURL=jquery.min.map
五、如何生成Source map
最常用的方法是使用Google的Closure编译器。
生成命令的格式如下：
java -jar compiler.jar \
--js script.js \
--create_source_map ./script-min.js.map \
--source_map_format=V3 \
--js_output_file script-min.js
各个参数的意义如下：
- js： 转换前的代码文件
- create_source_map： 生成的source map文件
- source_map_format：source map的版本，目前一律采用V3。
- js_output_file： 转换后的代码文件。
六、结束
记到这里，差不多该结束了。至于source map 是如何让压缩后的文件与源码进行一一对应的，个人认为就没必要深究下去了。当然感兴趣的同学可以通过百度进一步了解一番。
来源：oschina
链接：https://my.oschina.net/u/2831923/blog/1556743