概念
前端使用webpack打包项目后，打包后的代码与打包前的代码通常是不一致的，为了便于开发和上线过程中调试，定位到错误，通常需要进行源代码映射，从而定位到准确的源代码位置。而source-map就是把源代码和打包后的代码进行映射。
作用
通过映射，帮助开发者快速定位到bug在源代码所处的具体位置。
可选值
eval
eval模式，每个打包后的module被包裹在eval里，并且会在末尾追加注释 #sourceURL=/src/index.js。浏览器根据该URL去找这个源文件。
source-map
生成一个.map文件。包含源代码文件名，映射后代码相关变量，位置等信息，浏览器根据这些信息在sources下生成相应的源代码目录文件，方便我们定位。
打包后的文件在末尾追加注释：//# sourceMappingURL=main.js.map。浏览器根据此url去请求map文件
inline
把映射关系直接放在源代码块内，不单独生成.map文件。
hidden
会生成.map文件，但是浏览器不会去请求这个map文件，出错时前端把出错的行列传给服务器，一般用于错误收集。
cheap
使用 cheap 时，SourceMap 的代码定位只会定位到源码所在的行，不会定位至具体的列，所以构建速度有所提升。
cheap-module
如果只用 cheap ，显示的是 loader 编译之后的源代码，加上 module 后会显示编译之前的源代码。
开发和生产环境的配置
-
开发模式下为了考虑到调试方便和构建速度，可以选择cheap模式，eval模式等
-
生产环境考虑到安全性，可以选择hidden模式等
参考
一文搞懂SourceMap以及webpack devtool本文将介绍 SourceMap 的作用、简单工作原理以及 w - 掘金 (juejin.cn)
