Source Map

前言：
运行代码与源代码之间完全不同，这种情况下，如果调试应用，或是运行过程中出现了意料之外的错误，将无法定位。
无论调试和报错都是基于运行代码进行的。

一、Source Map 源代码地图

映射转换过后的代码与源代码之间的关系。可以通过 Source Map 逆向解析转换过后的代码。

一般第三方库，在发布的文件当中会有一个 .map后缀的source map 文件。用 jquery 库举例。
在最新版中 jquery 去掉了最后一行的注释。自行在jquery-3.4.1.min.js 的最后一行添加注释
//# sourceMappingURL=jquery-3.4.1.min.map

这行注释的作用，会自动请求 sourcemap 这么个文件，根据这个文件的内容 逆向解析出来源代码，以便于我们调试，同时有了这么个映射关系，所以源代码如果出现了错误，那就很容易定位到源代码对应的位置。

然后打开 Chrome 开发人员工具，确保开启了 Source Map 功能，尝试断点调试。

二、多种 Source Map

通过 Webpack.config.js 配置文件设置 source map 类型。
添加 devtool 属性，用来配置开发过程中的辅助工具。

配置方法

module.exports = {
	devtool : 'source map 类型'
}

1. source-map

会自动生成对应的 source map 文件，

2. eval 模式

eval 是 js 中的一个函数。
如：eval('console.log(123)') 可以运行字符串中的 js 代码。

运行原理：
将每个模块转换后的代码放入 eval 函数内执行，并在eval函数执行的字符串最后通过 //# sourceURL=webpack:///./src/main.js 的方式, 标注对应文件路径。

该模式不会生成对应的 source map，只能定位是哪一个文件出了错误，不知道代码的行内信息。
它的构建速度最快，但效果很简单。

3. eval-source-map 模式

该模式在 eval模式的基础上，可以定位到错误代码出现的文件，还能定位到具体的 行 和 列 的信息。并且生成一个DataUrl形式的SourceMap。

4. eval-cheap-source-map 模式

该模式对比 eval-source-map模式，少了错误代码出现的 列的信息。相比会比 eval-source-map模式的生成速度快些。

5. eval-cheap-module-source-map 模式

该模式对比 cheap-eval-source-map，cheap-eval-source-map模式，也只能定位到行，它对应的源代码是没有通过 loader加工的，原生手写代码。

6. cheap-source-map 模式

该模式没有 eval 和 module ，因此它没有 eval函数且是加工过后的源代码。

7. inline-source-map 模式

该模式与普通的 source map 效果一样。但 source map 的模式下，sourceMap 的文件是以物理方式存在；而 inline-source-map 模式下，sourceMap 的文件是以 dataURL 方式 嵌入到 代码当中。

这种方式将 sourcemap 放入到源代码中，导致源代码体积变大。

8. hidden-source-map 模式

该模式在开发工具中看不到 source map，但在构建中确实生成了 map 文件，但在代码中并没通过注释的方式引入这个文件。

一般用于开发第三方包，需要生成 source map，但不想在代码中引用它。

9. nosources-source-map 模式

该模式提供错误代码行列信息，但看不到源代码。

等… 多种模式，不一一说明

三、总结

• eval -----> 是否使用 eval 执行模块代码
• cheap -----> Source Map 是否包含行信息
• module ------> 是否能够得到 Loader 处理之前的源代码

选择合适的 Source Map

开发环境使用： eval-cheap-module-source-map

生产环境使用（即上线前的打包）：none

原因：source map 会暴露源代码。调试是开发阶段的任务，若对自己的代码没信息怕出错，可以选中 nosources-source-map，可以找到源代码错误的位置，且不会向别人暴露源代码的内容。