对于一个 webpack 构建的项目，source-map 对于开发调试，打包速度还是影响很大的，但是 webpack 的官方说明却不那么清晰易懂，也没有找到很精简的说明文章，索性自己尝试下所有的参数，概述一下自己的理解。
有兴趣的同学可以自行创建一个简单的 webpack 项目，切换参数尝试下，会更容易理解
**注意尝试的时候，要把webpack mode设置为none, webpack4 mode 为 development和production时会有额外的行为 **
首先看下官网的那张说明图：
看上去是不是很烦！！其实抽离出其中的关键字，理解每个关键字的做了什么，起到什么作用，剩下的就是彼此间的组合了。
eval => 提升 rebuild 速度
eval 的作用是使得打包后的 bundle 文件中每个模块代码使用 eval 去执行，会保留每个模块的 eval 形式的文件，即便是指定了eval-source-map,仍然会在浏览器开发者工具中生成 webpack-internals:// 文件夹来保存一份里面是eval形式的模块文件。如图：
猜测这样做的目的：因为 eval 中为字符串形式，所以当源码变动的时候进行字符串处理会提升 rebuild 的速度，所以可以看到图表中所有带有 eval 的选项，rebuild 速度都很快。
因此 eval 的关键字就是 rebuild
source-map => 额…… source-map
这个貌似不需要说明，就是指定了这个关键字才会真正的进行 source-map 生成，生成 .map 文件, 会在 bundle 文件末尾追加 sourceURI= 指定 .map 文件路径，会在浏览器开发者工具中看到webpack://的文件夹
inline => dataURI
正常的source-map 的生成是在dist 目录下创建一个 .map 文件， inline 的含义就是不产生独立的 .map 文件，而把 source-map 的内容以 dataURI的方式追加到 bundle 件末尾，入股：
至于什么是 dataURI，请自行google ~~
所以 inline 的关键字是 dataURI
cheap => lines-only
cheap 的含义是忽略列信息，可以看到图表中所有带有 cheap 的说明中都有 lines-only.
忽略列信息的意思就是出了问题只能定位到某一行，不能定位到这行的哪一列， cheap 主要是为了提升打包速度，很好理解嘛，只关注行，不关注列，生成map的速度肯定快啊~~
所以 cheap 的关键字就是lines-only
module => loader
module 的作用是 map 到 loader 处理前的文件，如果不加 module, 实际上是 map 到源文件经过对应 loader 处理后的样子。这个需要 loader 的支持
所以 module 的关键字是 loader
最下面的两个选项
hidden-source-map
就是不在 bundle 文件结尾处追加 sourceURL 指定其 sourcemap文件的位置，但是仍然会生成 sourcemap 文件。这样，浏览器开发者工具就无法应用sourcemap, 目的是避免把sourcemap文件发布到生产环境，造成源码泄露。
生产环境应该用错误报告工具结合 sourcemap 文件来查找问题
nosources-source-map
sourcemap 中不带有源码，这样，sourcemap 可以部署到生产环境而不会造成源码泄露，同时一旦出了问题，error stacks 中会显示准确的错误信息，比如发生在哪个源文件的哪一行，如图：
总结
以上所有关键字说明完毕，然后再去看官网的说明，会容易理解的多。什么时候用哪个选相也可以自行思考了。
本文仅从使用的角度来理解 sourcemap, 想要详细了解 sourcemap 原理的可自行搜索，如阮老师的 JavaScript Source Map 详解
最后附上主要关键字对应方便记忆：
- evel => rebuild
- inline => dataURI
- cheap => lines-only
- module => loader
