TypeScript 项目中 Webpack 配置 SourceMap 应选 nosources-source-map：生成含路径/行列映射但无源码的 .map 文件，JS 不含 sourceMappingURL 注释，配合 Nginx 拦截 .js.map 请求，既保障 Sentry 符号解析又防止前端泄露源码。
在 TypeScript 项目中用 Webpack 配置 SourceMap，核心不是“要不要”，而是“怎么映射、谁能看到”。生产环境既要让错误监控平台（比如 Sentry）能精准还原堆栈，又要防止用户在浏览器里点开就看到你的 TS 源码——关键在于切断 .map 文件与前端的直接链路，同时保留调试所需的结构信息。
选对 devtool 类型：优先用 nosources-source-map
这是最平衡的选择。它生成独立的 .js.map 文件，包含完整的文件路径、行号列号映射和 sources 列表，但 sourcesContent 字段为空。浏览器能跳转到 src/utils/api.ts:42，却读不到任何一行 TS 代码。
- Webpack 配置写法：
devtool: 'nosources-source-map' - 打包后 JS 文件末尾不会带
sourceMappingURL注释，避免自动请求 - 文件体积小，适合上传到 CDN 或静态托管，不增加带宽负担
- Sentry、Bugsnag 等平台仍可上传该 .map 文件做符号解析，不影响错误归因
彻底断开前端访问：隐藏注释 + 服务端拦截
即使生成了 .map 文件，只要它不被浏览器加载，就等于没存在。两步到位：
- 构建时确保 JS 文件里没有
//# sourceMappingURL=xxx.js.map这行注释（nosources-source-map默认不写，但需确认未被其他插件覆盖） - Nginx 或 CDN 配置规则，对所有
*.js.map请求返回404或403；例如 Nginx 中加：location ~* \.js\.map$ { return 404; } - 检查构建产物目录，确认没有意外暴露的
.map文件被一同部署
需要内部调试？私有托管 + 鉴权上传
如果运维或 QA 团队需要还原源码级错误，不要把 .map 放在公开路径，而是走私有通道：
- Webpack 保持
devtool: 'source-map'（保留sourcesContent），但构建脚本中移除sourceMappingURL注释 - 用脚本把生成的
.map文件单独上传到带 Token 鉴权的后端接口或私有对象存储（如 AWS S3 私有桶、腾讯云 COS） - 错误监控平台通过内网或带密钥的 API 拉取对应版本的 map 文件，前端完全无感知
TS Loader 要配对开启 sourceMap
ts-loader 默认不生成完整映射链，需显式启用：
- 确保
tsconfig.json中"sourceMap": true - Webpack 的 ts-loader 配置里不要设
transpileOnly: true（否则跳过类型检查且不生成映射） - 若用
fork-ts-checker-webpack-plugin，需同步配置其typescript选项，保证诊断信息与 SourceMap 对齐
