Webpack Source Map 失效主因是开发服务器未透传.map文件或devtool配置不当；需设devtool为"source-map"、正确配置devtoolModuleFilenameTemplate和sourceMapPathOverrides，并确保sourcemap注释未被压缩工具删除。
Webpack 生成的 source-map 不生效，断点打不中怎么办
根本原因通常是开发服务器没读到或没透传 Source Map 文件。Webpack 默认打包后生成 main.js 和 main.js.map，但 VSCode 调试器只认运行时实际加载的资源路径——如果 Webpack Dev Server 没把 .map 文件挂载进静态服务，或者用了 devtool: "eval" 这类不落地文件的模式，VSCode 就找不到映射关系。
-
devtool必须设为"source-map"或"inline-source-map"（前者生成独立 .map 文件，后者内联进 JS，更易调试） - 确保
output.devtoolModuleFilenameTemplate指向真实源码路径，比如"file://[absolute-resource-path]"，否则 VSCode 无法定位原始.ts或.jsx文件 - 若用
webpack-dev-server，确认它没加headers: { "Access-Control-Allow-Origin": "*" }之外的干扰配置，某些代理规则会拦截.map请求
VSCode launch.json 中 sourceMapPathOverrides 怎么写才对
这是最常配错的一环：VSCode 默认按浏览器返回的 sourceMappingURL 去找原始文件，但 Webpack 打包后路径和本地工程路径往往不一致，必须手动做路径映射。不配或配错，VSCode 就会显示 “No source available”。
- 先在浏览器开发者工具里打开 Sources 面板，右键压缩 JS → “Reveal in sidebar”，看右侧显示的原始文件路径长什么样（比如
webpack:///./src/App.tsx） - 再对比你本地项目根目录结构（比如
/Users/me/project/src/App.tsx），用sourceMapPathOverrides把前者映射到后者，例如："sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/src/*", "webpack:///src/*": "${webRoot}/src/*" } - 注意斜杠方向：Windows 下也统一用正斜杠
/，VSCode 不认反斜杠
Vue / React 项目里 vue-cli-service 或 react-scripts 怎么开 Source Map
这类封装工具默认关掉了生产环境的 Source Map，但开发时其实支持开启——只是开关位置藏得深，且不同版本行为不一。
- Vue CLI：在
vue.config.js加module.exports = { configureWebpack: { devtool: 'source-map' } }，别信productionSourceMap: true，它只影响npm run build输出，不影响 dev server - Create React App：直接改
node_modules/react-scripts/config/webpack.config.js里devtool的值（不推荐）；更稳妥的是用craco+craco.config.js覆盖：module.exports = { webpack: { configure: (config) => { config.devtool = 'source-map'; return config; } } } - 注意：
react-scripts@5+默认用cheap-module-source-map，断点可能跳到 Babel 编译后的代码行，不是原始 JSX 行，必须显式改成source-map
Chrome 能断点、VSCode 断点灰掉？检查 sourceMappingURL 是否被污染
VSCode 调试依赖浏览器暴露的 sourceMappingURL 注释，如果构建流程里有 UglifyJS、Terser 或其他压缩插件把它删了、改错了，VSCode 就彻底失联。
- 打开打包后的
main.js，滚动到底部，确认存在类似//# sourceMappingURL=main.js.map的注释（注意是#不是//） - 如果用了 Terser 插件，检查是否误开了
compress.drop_console或output.comments相关选项——有些版本会连 sourcemap 注释一起删 - 某些 CDN 或 Nginx 配置会过滤掉含
sourceMappingURL的行，用 curl 直接请求 JS 文件验证原始响应体
Source Map 不是“开了就灵”的开关，它是三端对齐的结果：Webpack 生成路径、浏览器加载路径、VSCode 解析路径，任意一环脱节，断点就失效。最容易忽略的是 devtoolModuleFilenameTemplate 和 sourceMapPathOverrides 的组合效果，建议每次改完都重新启动 dev server 并清空浏览器缓存再试。
