2-15 webpack中source map是什么？生产环境怎么用？

source map指的是将编译、打包、压缩后的代码映射回源代码的过程

经过webpack打包压缩后的代码基本上已经不具备可读性，此时若是代码抛出错误，想要回溯他的调用栈是非常困难的，而有了source map，加上浏览器调试工具（dev tools)，要做到这一点就会变得很容易，同时对于线上问题的追查也有一定帮助。

原理：webpack对于工程源代码的每一步处理都有可能会改变代码的位置、结构、甚至是所处文件，因此每一步都需要生成对应的source map。
sourceMap就是一个信息文件，里面储存着打包前的位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。具体如何编码。
如果我们启用了devtool配置，那么source map就会跟随源代码一步步被传递，直到生产最后的map文件，这个文件默认就是打包后的文件名字加上后缀.map，例如：bundle.js.map.
在生成map文件的同时，bundle文件中会追加一句注释来标识map文件的位置，例如：

// bundle.js
(function() {
	// bundle的内容
		...
	})()
// # sourceMappingURL = bundle.js.map

map文件只要不打开开发者工具，浏览器是不会加载的

线上环境一般有三种处理方案

hidden-source-map：借助第三方错误监控平台Sentry使用

nosources-source-map：只会显示具体行数以及查看源代码的错误栈。安全性比source map高

source：通过nginx设置将.map文件只对白名单开放(公司内网)

注意的是：避免在生产中使用 inline- 和 eval- ，因为它们会增加bundle体积大小，并降低整体性能。