面试题：Webpack中Source Map常见配置项及用途

Question

在Webpack中，Source Map用于将打包后的代码映射回原始源代码，方便调试。请列举至少三个常见的Source Map相关配置项，并说明它们的用途。

Answer 1

• devtool：
  • 用途：用于控制生成Source Map的类型和方式。不同的值对应不同的生成策略，例如source-map会生成完整的Source Map，包含所有信息，能提供最准确的调试信息，但生成速度慢且文件大；eval-source-map使用eval包裹模块，并生成Source Map，生成速度快，适用于开发环境。
• module.exports.devtool：
  • 用途：同devtool，在Webpack配置文件中设置module.exports对象的devtool属性，来确定生成Source Map的具体方式，从而影响调试体验和构建性能。
• cheap-module-source-map：
  • 用途：生成的Source Map会简化，不包含列信息，并且只包含loader处理后的代码映射，而不是原始的完整源代码映射。这种方式生成速度较快，文件体积相对较小，适用于开发环境中对调试精度要求不是特别高的场景。
• hidden-source-map：
  • 用途：生成Source Map，但不会将其添加到打包后的文件中，外部工具无法直接访问。适用于生产环境，既可以利用Source Map进行错误追踪等内部调试，又不会暴露原始代码映射给外部。