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

参考： juejin.cn/post/702353…

相关文章

Webpack5 中的 PublicPath