webpack 中正确处理 source map 需配置 devtool 选项、确保 babel/typescript 等 loader 启用 sourcemaps、避免多层转换中断映射链路，并通过 sourcemappingurl 注释和 devtools 验证生效。
在 Webpack 构建中正确处理源码行列号映射（即 source map），关键在于配置 devtool 选项并确保 loader（如 Babel、TypeScript）协同生成可用的映射信息，同时避免生产环境泄露源码。
理解 devtool 的不同取值对映射效果的影响
Webpack 的 devtool 决定了 source map 的生成方式、精度和性能。开发阶段推荐使用 source-map（最全但慢）或 eval-source-map（快且支持断点）；生产环境应禁用或改用 hidden-source-map（不注入 sourceMappingURL，需手动上传至错误监控平台）。
-
cheap-module-source-map：忽略 loader 生成的列信息，只保留行号，适合纯 JS 项目且构建较快 -
inline-source-map：map 内联进 bundle，方便调试但增大包体积，不适用于生产 -
nosources-source-map：保留行列映射和文件路径，但不包含原始源码内容，兼顾调试与安全
确保 Babel / TypeScript 等 loader 正确传递 source map
Babel 默认会生成 source map，但需显式启用 sourceMaps: true 并将 Webpack 的 map 传入。TypeScript 同理，ts-loader 或 fork-ts-checker-webpack-plugin 需配合 transpileOnly: false 和 compilerOptions.sourceMap: true。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
例如 Babel 配置：
module.exports = {
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
sourceMaps: true, // 必须开启
// 其他配置...
}
}
}]
}
};
避免多层转换导致映射断裂
当代码经过多个 loader（如 TS → Babel → CSS-in-JS），每层都需保持 source map 链路完整。常见问题包括：
- 某个 loader 关闭了
sourceMap选项（如某些 CSS 处理器默认不生成） - 使用了不支持 source map 的插件（如未适配的压缩插件）
- UglifyJS / Terser 在生产模式下未配置
sourceMap: true
建议统一在 optimization.minimizer 中为 TerserPlugin 显式开启：new TerserPlugin({
sourceMap: true,
terserOptions: { ... }
})
验证 source map 是否生效
构建后检查输出文件末尾是否有 sourceMappingURL=xxx.map 注释；在浏览器 DevTools 的 Sources 面板中展开 webpack://，确认能否看到原始源文件及准确的断点位置。若点击跳转失败或行列错位，大概率是某层 loader 未透传 map，或 devtool 与 loader 配置冲突。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
