Webpack5 中的 sourceMap
map 文件中的字段
- version: map 文件的版本号
- sources: 被映射的源文件路径
- names: 被映射的源文件中的变量名
- mappings: 映射关系，用来定位源文件中的代码位置
- file: 生成的 map 文件名
- sourceRoot: 被映射的源文件的根路径
- sourcesContent: 被映射的源文件内容
sourceMap 原理
基于浏览器对 sourceMap 功能的支持（在 settings 中设置），可以通过 js 文件的#sourceMappingURL注释，指向对应的 map 文件，从而实现 js 文件与源文件的映射关系。
map 文件的生成方式
格式
^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$
- inline: 内联，表示将 map 文件以 base64 编码，添加到 js 文件的末尾
- hidden: 隐藏，表示源文件中没有 map 文件的引用注释, 但会生成 map 文件, 浏览器控制台无法查看到 map 文件
- eval: 源文件通过 eval 函数来 map 源码， map 的内容以 base64 编码。无法映射 CSS 文件。
- nosources: map 文件中不包含源代码，即没有 sourcesContent 这个字段，只包含行列信息，可以用来定位错误位置，但无法打开源文件查看源码
- cheap: 只包含
行信息，无法定位到错误的列 - module: 可以定位到
loader``编译前的源码，即可以定位到源文件中的错误位置，否则只能定位到编译后的文件中的错误位置
重点记忆类型
-
source-map
外部生成 map 文件，可以定位到错误的行和列，且可以打开源文件查看源码。映射方式：基于编译后 js 文件末尾的
#sourceMappingURL注释指向 map 文件。适用于生产环境
-
inline-source-map
内联map 文件，可以定位到错误的行和列，且可以打开源文件查看源码。映射方式：将 map 文件内容 base64 编码后，以
#sourceMappingURL=data:application/json;base64,的形式，添加到编译后文件的末尾。内联的方式会使源文件体积变大，生产环境不建议使用。
-
eval-source-map
内联map 文件，只能映射JS 文件，无法映射 CSS 文件，可以定位到错误的行和列，且可以打开源文件查看源码。映射方式：将 map 文件内容 base64 编码后，以
#sourceMappingURL=data:application/json;base64,的形式，以模块为单位，添加到编译后 js 文件中。且包括源码在内，都通过 eval 函数执行。不支持 CSS 文件的映射，无论开发或生产环境，都不建议使用。
-
hidden-source-map
外部生成 map 文件，源码文件中无映射关系，即没有 #sourceMappingURL注释，无法定位到错误的位置，无法打开源文件查看源码。映射方式：无
适用于生产环境，配合 Sentry 等错误监控平台，可以定位到错误的位置，且不会暴露源码。即将 map 文件上传到 Sentry，Sentry 会根据 map 文件，将错误定位到源文件中，但不会暴露源码。
-
nosources-source-map
外部生成 map 文件， 生成的 sourceMap 文件中不包含源代码，即没有 sourcesContent这个字段，只包含行列信息，可以用来定位错误位置，但无法打开源文件查看源码映射方式：基于编译后 js 文件末尾的
#sourceMappingURL注释指向 map 文件。 -
cheap-source-map
外部生成 map 文件，错误信息定位到 loader编译后文件的行，只包含行信息，无法定位到错误的列，但可以打开源文件查看源码。映射方式：基于编译后 js 文件末尾的
#sourceMappingURL注释指向 map 文件。可用于开发环境，但无法直接定位并查看到编译前的源文件，不建议使用。
-
cheap-module-source-map
外部生成 map 文件，错误信息定位到 loader编译前文件的行，只包含行信息，无法定位到错误的列，但可以打开源文件查看源码。映射方式：基于编译后 js 文件末尾的
#sourceMappingURL注释指向 map 文件。适用于开发环境，可直接定位到编译前的源文件，推荐使用。
生产环境可用的 sourceMap
根据官方文档说明，以下 5 种 sourceMap 可以用于生产环境：
(none)当不需要查看源码且没有错误监控平台时，可以不使用 sourceMap，此时性能最好。
source-map需要在浏览器定位和查看源码时使用，但会暴露源码，性能最差。
- nosources-source-map
- hidden-nosources-source-map
hidden-source-map在浏览器上无法查看源码，但可以配合 Sentry 等错误监控平台，定位到错误的位置，不会暴露源码。
即将 map 文件上传到 Sentry，Sentry 会根据 map 文件，将错误定位到源文件中，但不会暴露源码。
总结
- 开发环境：推荐使用
cheap-module-source-map，可以直接定位到编译前的源文件，且性能较好。 - 生产环境：推荐使用
hidden-source-map，可以配合 Sentry 等错误监控平台，定位到错误的位置，不会暴露源码。实际根据需求还可以选择(none)和source-map