source map顾名思义，就是代码地图，为什么会有这个东西呢，具体的起源等有时间在追溯（知道是谷歌开发的，chorm是支持的），先看看这个东西是怎么用的，有什么用。
提到source map，说的最多的是javascript source map，其实并不仅仅是javascrip程序需要生成source map，
其他的代码也需要，比如css（尤其是对于一个大型的前端样式库，比如bootstrap等）。
现代javascript程序越来越复杂，尤其是模块化后，一个javascript程序是由很多文件构，为了让浏览器支持这个复杂的js程序，必须使用开发平台的各种构建工具比如webpack，gulp等等对js程序进行压缩，减少体积；合并，减少HTTP请求的次数；甚至是转换，比如把TypeScript转换成标准的javascript。
这样就导致，在浏览器中实际运行的javascript代码跟实际的源程序的脱节，这样给调试程序打来问题，浏览器中的错误提示可能很难定位到具体的程序中。
使用less开发的css文件，合并压缩后，也有类似的问题，这时候就需要source map文件 简单说，
Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。 有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。 比如构建工具，在生成app.js的同时，生成一个sourcemap文件app.js.map，
当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。
例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，
而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。
为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。
webpack 的source map 有很多不同的选项可用，请务必仔细阅读它们，以便可以根据需要进行配置。
CSDN
原文：https://blog.csdn.net/wanhongbo029/article/details/84135076
刚详细的介绍 参考：http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
