sourcemap 在生产环境不生成 .map 文件是为规避源码泄露，但可通过 webpack.sourcemapdevtoolplugin 精确控制映射表生成路径、禁用 sourcemappingurl 注入，并上传至 sentry/bugsnag 等平台实现错误堆栈还原。
SourceMap 在生产环境不生成 .map 文件，本质上是主动规避源码泄露风险，但又想保留映射能力用于错误监控（如 Sentry、Bugsnag），这时不能靠 devtool: 'source-map' 自动生成并写入文件，而需用 webpack.SourceMapDevToolPlugin 精确控制映射表的生成位置与分发方式。
明确目标：.map 不随 JS/CSS 部署到 CDN，但能被错误平台读取
关键不是“让浏览器加载 SourceMap”，而是“让错误上报系统解析堆栈”。所以 .map 文件不应放在 public 目录或与 bundle 同路径，而应单独上传、存档或私有托管。
- Webpack 默认的
devtool配置（如'source-map'）会把 .map 文件写入 output.path，容易被公开访问 -
SourceMapDevToolPlugin可绕过默认行为，实现：生成 .map → 重定向输出路径 → 不注入 sourceMappingURL → 手动上传 - 它不依赖
devtool，可与devtool: false共存，彻底避免自动注入
配置 SourceMapDevToolPlugin 实现分离输出
在 webpack.config.js 的 plugins 中添加：
const webpack = require('webpack');
<p>module.exports = {
// 关闭自动 sourcemap 生成
devtool: false,</p><p>plugins: [
new webpack.SourceMapDevToolPlugin({
// 仅对 JS 生效（可加 test: /.js(\?.*)?$/i）
filename: '[file].map',
// 把 .map 输出到 dist/sourcemaps/ 而非 dist/ 根目录
destination: 'sourcemaps',
// 不往 JS 文件末尾写 sourceMappingURL 注释（防暴露）
append: false,
// 可选：只生成指定 chunk 的 map，缩小体积
exclude: [/node_modules/, /vendor/],
// 可选：限制映射范围，提升生成速度
moduleFilenameTemplate: '[resource-path]'
})
]
};</p>
构建后，dist/sourcemaps/ 下会出现 main.js.map 等文件，而 dist/main.js 里**没有** //# sourceMappingURL= 行。
配合错误监控平台完成外发
生成的 .map 文件本身不对外服务，需主动上传至错误平台：
-
Sentry：用
sentry-cli releases files <release> upload-sourcemaps</release>指向dist/sourcemaps/目录 -
Bugsnag：调用
bugsnag-source-mapsCLI 或 API，传入dist/sourcemaps/和对应 release 版本 -
自建服务：将
dist/sourcemaps/整体同步到内网对象存储（如 S3 private bucket），并在上报时通过sourceMapUrl字段提供带鉴权的下载地址
验证是否生效：检查三处关键点
打包完成后快速确认：
-
dist/main.js文件末尾没有//# sourceMappingURL=main.js.map -
dist/sourcemaps/main.js.map文件存在且内容为合法 JSON（含sources,mappings等字段） - 在 Sentry 中触发一次错误，查看 stack trace 是否显示
src/index.ts:12:5这类原始路径，而非main.js:1234:5
