开发环境应启用SourceMap（如cheap-module-source-map）以精准调试，生产环境必须关闭（设为false）以防源码泄露；CSS SourceMap需单独配置css-loader、MiniCssExtractPlugin等；.map文件需路径匹配、响应头正确且CDN缓存合理。
开发环境开启 SourceMap 但生产环境关闭
SourceMap 在开发时能精准定位原始源码位置，但上线后暴露源码路径、结构甚至变量名，属于典型的安全与性能双风险。Webpack 默认的 devtool 配置在不同模式下行为差异极大，不能靠“开发用 source-map，生产删掉”这种粗暴切换。
- Webpack 5 中，
mode: 'development'默认启用eval-cheap-module-source-map（快且够用），而mode: 'production'默认是false（完全不生成）——这是安全基线，别手动覆盖 - 如果用了自定义
devtool，务必在webpack.config.js中按mode分支控制：module.exports = (env, argv) => ({ devtool: argv.mode === 'production' ? false : 'source-map' }); - Vue CLI / Create React App 等脚手架已内置该逻辑，但一旦 eject 或手动改
configureWebpack，就容易误开devtool: 'source-map'到生产构建里
Webpack 的 devtool 值选哪个不踩坑
不是越详细越好，也不是越快越好，得看实际调试场景和部署约束。比如 source-map 全量生成，体积大、慢；eval-source-map 开发快但不支持 IE；hidden-source-map 适合错误监控平台上传，但浏览器开发者工具里看不到。
- 日常本地开发：用
cheap-module-source-map（忽略 loader 处理后的列信息，够准又轻） - CI 构建 + 错误上报：用
hidden-source-map，生成文件但不加sourceMappingURL注释，避免被浏览器加载 - 绝对不要在生产环境用
inline-source-map或eval类型——它们把 map 内联进 JS，直接暴露源码内容 - 注意
cheap和module组合：不含module就无法映射到node_modules里的源码，调试第三方库时会断在编译后代码上
CSS 的 SourceMap 单独失效或不生效
CSS 的 SourceMap 不由 Webpack 的 devtool 全局控制，而是依赖 css-loader 和 style-loader 的配置，尤其在使用 MiniCssExtractPlugin 时极易断链。
- 确保
css-loader开启sourceMap: true（默认为false）：{ loader: 'css-loader', options: { sourceMap: true } } - 用
MiniCssExtractPlugin提取 CSS 时，必须同时给它传sourceMap: true：new MiniCssExtractPlugin({ filename: 'styles.css', sourceMap: true }) - 如果用了 PostCSS，检查
postcss-loader是否也配了sourceMap: true，否则前序处理丢失映射 - 浏览器里看到 CSS 规则指向
index.css:12:3而非Button.module.css:5，基本就是某一层 loader 没开 sourceMap
上线后 SourceMap 文件被 404 或未加载
生成了 .map 文件不等于它能被浏览器自动找到。关键在三处：输出路径、HTTP 响应头、CDN 缓存策略。
立即学习“前端免费学习笔记（深入）”；
- Webpack 输出的
.map文件必须和对应 JS/CSS 同目录，且文件名严格匹配（如app.js对应app.js.map）；若用output.filename加了 hash，output.sourceMapFilename也要同步：sourceMapFilename: '[name].[contenthash].js.map'
- 确保服务器返回的 JS/CSS 响应头包含
SourceMap，或者文件末尾有注释：//# sourceMappingURL=app.js.map；如果用了devtool: 'hidden-source-map'，这行注释不会存在，需靠服务端注入 - CDN 或 Nginx 默认不缓存
.map文件，或返回Cache-Control: no-store，导致反复请求失败；建议显式配置：location ~ \.map$ { add_header Cache-Control "public, max-age=31536000"; }
最常被忽略的是：SourceMap 是“链式信任”，JS → CSS → PostCSS → Sass → TS，任一环断掉，整条链就回不到原始行号。查问题先看浏览器 Network 面板里 .map 请求是否 200，再逐层确认 loader 配置和输出路径是否对齐。
