Webpack Source Map 生成流程深度解析

Webpack Source Map 生成流程深度解析

Source Map 是调试和定位问题的重要工具，Webpack 通过复杂机制生成映射关系。本文将从源码层面拆解生成流程，分析 devtool 配置的影响。

---

一、核心流程总览

1. 模块转换阶段：Loader 处理生成带 Source Map 的代码
2. 模块合并阶段：将多个模块合并为 Chunk
3. 映射合成阶段：合并各模块的 Source Map
4. 输出阶段：生成最终 Source Map 文件

二、源码关键路径分析

// webpack/lib/Compilation.js
processModuleDependencies(module, callback) {
    // 模块处理入口
    this.addModuleDependencies(
        module,
        dependencies,
        this.bail,
        null,
        true,
        callback
    );
}

// webpack/lib/SourceMapDevToolPlugin.js
apply(compiler) {
    compiler.hooks.compilation.tap("SourceMapDevToolPlugin", compilation => {
        // 注册 Source Map 处理钩子
        compilation.hooks.afterOptimizeChunkAssets.tap(...);
    });
}

---

三、devtool 配置矩阵

配置选项	构建速度	重构质量	生产适用	特点
eval	⚡️⚡️⚡️	⭐	❌	使用 eval 包裹代码
cheap-source-map	⚡️⚡️	⭐⭐	✅	只映射行号
source-map	⚡️	⭐⭐⭐⭐⭐	✅	完整独立 map 文件
inline-cheap-source-map	⚡️⚡️	⭐⭐	❌	内联 Base64 格式

---

四、映射关系生成原理

VLQ 编码示例： 原始位置 → 生成位置：(1,10) → (5,2) 编码结果：AAAA,IAAM

映射结构：

{
  "version": 3,
  "sources": ["webpack:///src/index.js"],
  "mappings": "AAAA,SAASA,IAAM",
  "sourcesContent": ["原代码内容"]
}

---

五、典型案例分析

配置对比：

// webpack.config.js
module.exports = {
  devtool: 'cheap-module-source-map'
}

// vs

module.exports = {
  devtool: 'eval-source-map'
}

生成结果差异：

1. cheap-module-source-map 生成独立 .map 文件，精确到行级别
2. eval-source-map 将映射数据内联在 eval 中，格式为 DataURL

---

六、性能优化建议

1. 开发环境：使用 eval-cheap-module-source-map 平衡质量和速度
2. 生产环境：推荐 hidden-source-map 配合错误监控系统
3. 大型项目：通过 exclude 排除 node_modules 提升构建速度