什么是 Source Map
我们线上的代码一般都是经过打包的，如果线上代码报错了，想要调试起来，那真是很费劲了，比如下面这个例子：
console.log('source map!!!')
console.log(a); //这一行肯定会报错
浏览器打开后的效果：
点击进入报错文件之后：
这根本没法找到具体位置以及原因，所以这个时候， Source Map 的作用就来了， Webpack 构建代码中，开启 Source Map ：
然后重新执行构建，再次打开浏览器：
可以发现，可以成功定位到具体的报错位置了，这就是 Source Map 的作用。需要注意一点的是， Source Map 并不是 Webpack 特有的，其他打包工具同样支持 Source Map ，打包工具只是将 Source Map 这项技术通过配置化的方式引入进来。关于打包工具，下文会有介绍。
如何使用 Source Map
生成 Source Map 之后，一般在浏览器中调试使用，前提是需要开启该功能，以 Chrome 为例：
打开开发者工具，找到 Settins ：
勾选以下两个选项：
再回到上面的案例中，源代码文件变成了 index.js ，点击进入后显示真实的源代码，即说明成功开启并使用了 Source Map
建议以下 7 种可选方案：
source-map：外部。可以查看错误代码准确信息和源代码的错误位置。
inline-source-map：内联。只生成一个内联 Source Map，可以查看错误代码准确信息和源代码的错误位置
hidden-source-map：外部。可以查看错误代码准确信息，但不能追踪源代码错误，只能提示到构建后代码的错误位置。
eval-source-map：内联。每一个文件都生成对应的 Source Map，都在 eval 中，可以查看错误代码准确信息 和 源代码的错误位置。
nosources-source-map：外部。可以查看错误代码错误原因，但不能查看错误代码准确信息，并且没有任何源代码信息。
cheap-source-map：外部。可以查看错误代码准确信息和源代码的错误位置，只能把错误精确到整行，忽略列。
cheap-module-source-map：外部。可以错误代码准确信息和源代码的错误位置，module 会加入 loader 的 Source Map。
内联和外部的区别：
外部生成了文件（.map），内联没有。
内联构建速度更快。
总结
（1）开发环境：需要考虑速度快，调试更友好
速度快( eval > inline > cheap >… )
eval-cheap-souce-map
eval-source-map
调试更友好
souce-map
cheap-module-souce-map
cheap-souce-map
最终得出最好的两种方案 –> eval-source-map（完整度高，内联速度快） / eval-cheap-module-souce-map（错误提示忽略列但是包含其他信息，内联速度快）
（2）生产环境：需要考虑源代码要不要隐藏，调试要不要更友好
内联会让代码体积变大，所以在生产环境不用内联
隐藏源代码
nosources-source-map 全部隐藏（打包后的代码与源代码）
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
最终得出最好的两种方案 –> source-map（最完整） / cheap-module-souce-map（错误提示一整行忽略列）