面试题：Webpack中Source Map的几种常见类型及简单应用场景

Question

请列举Webpack中Source Map的几种常见类型，并简要说明每种类型在开发或生产环境下的应用场景。

Answer 1

常见类型

1. eval：使用eval()包裹模块代码，并且每个模块都包含一个//# sourceURL注释，以指向原始文件。同时，生成的bundle.js文件底部会包含一个eval source map，它将eval中的代码映射回原始源文件。
2. eval - source - map：同样使用eval()包裹模块代码，但每个eval块中的代码会生成完整的source map，source map数据通过data:application/json;base64的形式附加在eval代码之后。这种方式构建速度快，且调试时能准确映射到原始代码。
3. cheap - module - eval - source - map：使用eval()包裹模块代码，source map仅包含行映射信息，不包含列映射，同时不包含Loader的source map信息（例如Babel转换等）。构建速度相对较快，适用于开发环境。
4. cheap - source - map：不使用eval，生成的source map文件仅包含行映射信息，不包含列映射，也不包含Loader的source map信息。这种类型的source map文件较小，构建速度较快。
5. inline - source - map：将source map以Data URL的形式直接嵌入到生成的bundle.js文件末尾。不生成单独的source map文件，适用于小项目或者对文件数量敏感的场景。
6. inline - module - source - map：将每个模块对应的source map以Data URL的形式直接嵌入到eval包裹的模块代码之后。它为每个模块都提供了详细的source map信息，同样适用于开发环境。
7. hidden - source - map：生成完整的source map文件，但不会将source map的引用添加到生成的bundle.js文件中。适用于生产环境中，既想保留source map用于错误分析，但又不想让用户轻易获取到source map。
8. nosources - source - map：生成的source map文件中，只包含映射关系，但不包含原始代码内容。在生产环境中，当你希望能够定位错误到具体的源文件位置，但又不想暴露原始代码时使用。

应用场景

• 开发环境：
  • eval - source - map：构建速度快，同时能提供详细的映射信息，方便调试，能准确显示错误在原始代码中的位置，包括列信息，适用于大多数开发场景。
  • cheap - module - eval - source - map：构建速度更快，虽不包含列映射和Loader的source map信息，但在开发环境中，对于快速定位错误到大致的行位置已经足够，适合追求极致构建速度的开发场景。
• 生产环境：
  • hidden - source - map：适合生产环境下需要对错误进行分析定位，但又不希望用户直接通过浏览器开发者工具获取到source map的情况。例如，线上应用出现错误时，通过服务器收集错误信息和对应的source map来分析问题，而用户看不到source map。
  • nosources - source - map：在需要定位错误到源文件位置，但又绝对不允许暴露原始代码的场景下使用，如对安全性要求极高的应用。