必须显式配置 devtool: "source-map"，因 development 模式默认仅用 eval 类型，无法被 vscode 正确解析；同时需正确设置 webroot 和 sourcemappathoverrides 以匹配 sourcemap 中的路径。
Webpack devtool 配置必须显式设为 "source-map"
VSCode 断点打不进 src/ 下的文件，最常见原因是 Webpack 没生成可落地的 source map。即使 mode: "development"，默认也只用 eval 类型，浏览器无法加载、VSCode 无法解析。
必须在 webpack.config.js 中明确写：
module.exports = {
devtool: "source-map",
// 其他配置...
};
"eval-source-map" 虽快但不稳定：Chrome 远程调试或某些版本下断点偏移，不是 bug，是 eval 模式固有限制；"inline-source-map" 会把 map 塞进 bundle，体积大且不利于调试器识别路径。
- CLI 启动时加
--devtool source-map参数也有效，但不如配置文件可靠 - 若用
webpack-dev-server，确保它读的是你改过的配置，而不是某个缓存副本 - Vite 或 Next.js 用户注意：它们不走 Webpack，别往
webpack.config.js里硬塞配置
launch.json 的 webRoot 和 sourceMapPathOverrides 必须匹配实际路径
VSCode 不知道你的源码在哪，它靠 webRoot 去匹配浏览器 sourcemap 里的 sources 字段。路径对不上，断点就灰掉。
典型错误：
-
webRoot写成"${workspaceFolder}"，但项目入口 HTML 在public/index.html，构建产物却输出到dist/—— 此时应设为"${workspaceFolder}/dist" - sourcemap 中的路径是
webpack:///./src/App.jsx，但没配sourceMapPathOverrides，VSCode 就找不到对应文件
常用映射写法（按框架）：
React（CRA）："webpack:///src/*": "${webRoot}/../src/*"
Vite："webpack:///./src/*": "${webRoot}/src/*"
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
Vue CLI："webpack:///src/*": "${webRoot}/src/*"
注意斜杠方向和通配符位置，少一个 / 或 * 都会导致映射失败。
断点失效时优先检查浏览器是否加载了 sourcemap
别急着改配置，先打开 Chrome DevTools → Sources 标签页 → 展开左侧 localhost 域名 → 看有没有出现 webpack:// 或 app:// 下的源码树。没有，说明问题出在源头：sourcemap 根本没生成或没被浏览器请求到。
- 检查 Network 面板，过滤
.map，确认是否有 404 的 map 文件请求 - 禁用浏览器缓存（DevTools → Network → ✅ Disable cache），否则旧的无 map 的 bundle 可能被复用
- 确保开发服务器运行中，且 URL 和
launch.json中的url完全一致（包括 http/https、端口、路径） - 不要复用已有 Chrome 标签页调试：VSCode 默认新开窗口，复用页不会重新加载 sourcemap
monorepo 或自定义 output.path 时路径前缀容易错位
在 monorepo（如 pnpm workspace）或 Webpack 自定义了 output.path 的项目里，sourcemap 的 sources 字段常带多余前缀，比如 webpack:///packages/my-app/src/App.tsx，但你的 webRoot 是整个 workspace 根目录，VSCode 就找不到 packages/my-app/src/ 这层。
这时必须用 sourceMapPathOverrides 剪掉前缀：
"sourceMapPathOverrides": {
"webpack:///packages/my-app/*": "${webRoot}/packages/my-app/*",
"webpack:///packages/*": "${webRoot}/packages/*"
}
更通用的做法是加一条兜底映射："webpack:///*": "${webRoot}/*"，但要放在具体规则之后，避免覆盖精确匹配。
真正卡住的地方往往不是某一行配置写错了，而是 sourcemap 生成路径、浏览器缓存、VSCode 调试会话生命周期这三者没对齐——调一次不通，就逐个验证这三个点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
