多层构建中sourcemap链路断裂本质是映射信息在某一层被截断或覆盖，关键在于每层（babel、ts、css loader、terser）均需显式启用并传递source map，而非仅依赖devtool总开关。
多层构建中 SourceMap 链路断裂，本质是映射信息在某一层被截断或覆盖。关键不在于“有没有开启”，而在于“每一层是否主动保留并向下传递”。
Webpack 的 devtool 是总开关，但不是万能开关
仅设 devtool: 'source-map' 只控制 Webpack 本身生成最终 map 文件，它不自动确保 Babel、TypeScript 或 CSS 处理器也参与链路。如果 Babel 关闭了 source map 输出，Webpack 就只能从“已转换的 JS”开始映射，丢失原始 TS/ES6 行列信息。
- Babel 必须显式启用：
sourceMaps: true（在 babel-loader options 中） - TypeScript 编译器需配
"sourceMap": true（tsconfig.json） - CSS 相关 loader（如 sass-loader、less-loader）也要检查是否开启
sourceMap: true
避免 loader 层级间映射丢失
当一个文件经过多个 loader（例如：.ts → ts-loader → babel-loader → style-loader），每层都应输出可被下一层消费的 source map。常见断裂点：
- 某个 loader 使用了默认配置（如旧版 css-loader 默认不生成 source map）
- loader 选项写错位置（例如把
sourceMap: true放在了 use 数组外） - 使用了不兼容插件（如未适配 source map 的自定义 loader）
验证方法：临时注释掉部分 loader，观察 Chrome DevTools → Sources 面板中是否还能看到原始 .ts 或 .scss 文件；若消失，说明该层中断了链路。
Terser 压缩阶段必须显式保留
生产环境启用代码压缩时，TerserPlugin 默认会丢弃 source map。即使 Webpack 和 Babel 都配对了，Terser 一压就断。
- 不能只靠
devtool: 'source-map'，必须在optimization.minimizer中为 TerserPlugin 单独配置 - 正确写法示例：
推荐开发与生产差异化配置
兼顾速度与精度，不同环境选不同模式：
- 开发用 eval-source-map：每个模块独立 eval + map，热更新快，定位准
- 测试或预发用 cheap-module-source-map：忽略列号、保留模块名，体积小、生成快
- 生产用 source-map：完整行列映射，配合 Terser 显式开启，map 文件单独部署（注意 Nginx 需允许 .map 后缀访问）
不复杂但容易忽略
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
