面试题：Webpack中Source Map常见配置项及在调试中的作用

Question

请阐述Webpack中Source Map的常见配置项，如'source - map'、'eval - source - map'、'cheap - module - source - map'等，并说明它们在前端调试场景下各有什么特点和适用情况。

Answer 1

source - map

• 特点：生成完整的Source Map，会将编译后的代码映射回原始代码，包含详细的映射信息，包括列信息等。构建速度最慢，但生成的映射最精确。
• 适用情况：适用于生产环境，方便排查线上问题，因为它提供最准确的原始代码位置映射，尽管构建时间长，但对定位问题有很大帮助。

eval - source - map

• 特点：使用eval包裹模块代码，并生成Source Map。构建速度相对较快，因为eval执行代码效率高，同时能提供较好的映射信息用于调试。
• 适用情况：适合开发环境，既保证了较快的构建速度，又能满足调试需求，开发过程中快速反馈，且能定位到原始代码位置。

cheap - module - source - map

• 特点：“cheap”表示它不会包含列信息，只包含行信息，构建速度比source - map快。“module”意味着它会考虑loader对源文件的转换。
• 适用情况：适用于开发环境，在开发过程中，行信息通常足以定位问题，这种配置在保证一定构建速度的同时满足调试需求，相比eval - source - map，构建速度更快一些，但定位精度略低（无列信息）。