要让 typescript 项目在 webpack 中启用严格、准确、可调试的 sourcemap，关键配置是：devtool: 'source-map'（生产）或 'cheap-module-source-map'（开发），配合 tsconfig.json 中启用 "inlinesources": true 和 "sourceroot": "./src"，确保 resolve.extensions 包含 .ts/.tsx，ts-loader 不跳过类型检查，并验证 chrome devtools 中能显示 .ts 源文件及正确断点。
要让 TypeScript 项目在 Webpack 中启用严格、准确、可调试的 SourceMap，关键不是“越全越好”，而是匹配开发阶段的真实需求——既要精准还原原始 TS 行列位置，又要保留 loader 处理链（如 ts-loader）的中间映射，同时避免混淆或缺失。
启用完整源码映射（含 TypeScript 原始位置）
默认的 source-map 模式已生成独立 .map 文件，但对 TypeScript 来说还不够“严格”：它只映射最终 JS 输出与原始 TS 的关系，若中间经过 Babel 或其他 loader，可能丢失部分列信息或类型注解上下文。真正严格的配置需确保：
- Webpack 知道所有源文件扩展名（
.ts和.tsx）并参与解析 - ts-loader 不跳过类型检查，且开启
transpileOnly: false（默认行为，保证类型报错阻断构建） - devtool 使用支持列映射 + loader 映射的模式
推荐配置项：devtool: 'source-map'（生产环境）或 'cheap-module-source-map'（开发环境）——后者虽略去列信息，但保留模块级映射，配合 ts-loader 实际调试体验更稳；若追求极致行列精度（如单步调试 TS 中的 async/await 或装饰器），用 'source-map' 更可靠。
确保 TypeScript 源文件内容内联进 SourceMap
默认情况下，Webpack 生成的 .map 文件只记录 sources 路径，不包含原始代码内容。浏览器调试时若源文件不可达（比如没部署到服务器、路径不对），就会显示空白或 “No content available”。要强制把源码嵌入 .map 文件，需在 tsconfig.json 中启用：
-
"inlineSources": true—— 把 TS 源码字符串直接写入 .map 的sourcesContent字段 -
"sourceRoot": "./src"（可选）—— 显式声明源码根目录，辅助路径解析
这样即使没有本地服务或 sourcemap 托管失败，Chrome DevTools 仍能显示可读的原始 TypeScript 代码。
验证 SourceMap 是否真正生效
光配对了还不够，得确认它在浏览器里能用：
- 打开 Chrome DevTools → Sources 面板 → 左侧文件树中展开
webpack://，应能看到./src/xxx.ts文件（而非仅bundle.js） - 在 TS 文件里打个断点，刷新页面，确认执行停在 TS 行，而不是转译后的 JS 行
- 触发一个错误（比如调用未定义变量），查看控制台堆栈——行号和文件名应指向
.ts，而非.js
如果看到的是 JS 文件或行列错位，大概率是 resolve.extensions 缺失 .ts，或 ts-loader 被 exclude: /node_modules/ 错误过滤了某些必要依赖（如 @types 类型声明）。
避免常见干扰项
几个看似合理、实则破坏严格映射的配置陷阱：
-
devtool: 'eval-source-map'—— 虽快，但每个模块用eval()包裹，SourceMap 易受浏览器安全策略拦截，且无法映射到原始 TS 文件路径 - 同时启用
UglifyJsPlugin或TerserPlugin却没配sourceMap: true—— 压缩器会抹掉 Webpack 生成的映射，必须显式开启压缩器的 sourceMap 支持 -
output.devtoolModuleFilenameTemplate用了相对路径或乱码模板 —— 导致 Chrome 无法关联源文件，建议设为'[absolute-resource-path]'或'webpack:///./[resource-path]'
