VSCode调试Webpack配置需用Node.js调试器直接运行webpack CLI入口，而非调试配置文件本身；断点失效主因是调试器未加载配置，如函数式导出需将debugger置于函数体内，Windows须用webpack.cmd，sourceMapPathOverrides须按Chrome Sources中实际路径前缀配置，且devtool必须显式设为source-map。
VSCode 调试 Webpack 配置文件本身，不是靠插件“集成”，而是用 Node.js 调试器直接运行 webpack CLI 入口；所谓“插件”只是提供语法提示或任务探测，不参与执行逻辑。
webpack.config.js 断点为什么打不进
常见现象：在 module.exports = { ... } 上方加 debugger，F5 启动后没停住；或者断点是灰色空心圆，提示 “未绑定”。
- 根本原因不是 VSCode 设置错，而是调试器没真正加载你的配置文件——它可能在跑全局 webpack、跑错入口、或被函数式导出绕过
- 函数式配置
module.exports = (env, argv) => { ... }时，debugger必须放在函数体内部，不能放在export语句行 - 如果用了
webpack --config webpack.config.ts，但没装ts-node或没配node -r ts-node/register，Node 直接报Cannot use import statement，调试器连启动都失败 - Windows 下
program指向node_modules/.bin/webpack会失败，必须用node_modules/.bin/webpack.cmd
launch.json 怎么配才真正触发配置加载
关键不是“调试 webpack.config.js”，而是“让 webpack CLI 执行时加载并运行它”。VSCode 的 type: "node" 配置必须对齐 CLI 的实际调用链。
- 推荐方式：把
program设为"${workspaceFolder}/node_modules/.bin/webpack"（macOS/Linux）或"${workspaceFolder}/node_modules/.bin/webpack.cmd"（Windows），再通过args传参，例如["--mode=development", "--config=webpack.config.js"] - 避免直接设
program为webpack.config.js：Node 会把它当普通脚本执行，跳过 webpack CLI 初始化逻辑，env和argv都为空，插件构造可能报错 - 若项目用 npm script（如
"build": "webpack --mode=production"），可在launch.json中设"program": "npm"，"args": ["run", "build"]，但需确保"console": "integratedTerminal"，否则看不到 webpack 实时日志 -
stopOnEntry: true没用——它停在 node 进程第一行，不是你的配置文件
sourceMapPathOverrides 映射失败的典型写法
调试打包产物时断点灰掉，90% 出在 sourcemap 路径没对上。Chrome DevTools 的 Sources 面板里看到的路径前缀，就是 sourceMapPathOverrides 的匹配依据。
- 先打开 Chrome DevTools → Sources → 找到你的 bundle → 右键 → “Reveal in sidebar”，看左侧显示的是
webpack:///./src/App.tsx还是webpack:///src/App.tsx，这决定你映射规则的左边部分 - webRoot 必须是项目根目录（即
package.json所在位置），不是src或dist；写成"${workspaceFolder}/dist"是常见错误 - 斜杠必须全用正斜杠
/，Windows 下也别用\；${webRoot}是绝对路径，自动补全，不用手动拼 - 常用映射（按实际 sources 前缀选）：
"webpack:///./src/*": "${webRoot}/src/*""webpack:///src/*": "${webRoot}/src/*""webpack:///./*": "${webRoot}/*"
devtool 必须显式设为 source-map
Webpack 默认 development 模式用 eval-source-map，VSCode 无法解析其内联结构，断点必然漂移或失效。
- 在
webpack.config.js中硬编码devtool: "source-map"，不要依赖 mode 自动推导 -
inline-source-map把 map 塞进 JS 文件末尾，某些代理或构建步骤会截断注释，导致 VSCode 找不到 map 内容 - CLI 参数
--devtool source-map也可用，但不如配置文件稳定；尤其在多环境配置（如函数式导出）中，参数可能被覆盖 - Vue CLI 用户注意：
productionSourceMap: true不影响 dev server 行为，必须在configureWebpack.devtool里重写
最易被忽略的一点：webpack-dev-server 启动时是否真读了你改过的 webpack.config.js？它可能缓存了旧配置，或从 vue.config.js/next.config.js 等上层封装中继承了配置，导致你改了文件却没生效。
