VSCode不运行Webpack，也不自动编译；正确做法是终端执行npm run dev（对应webpack serve），由webpack-dev-server自身监听文件并热更新，VSCode仅需关闭formatOnSave干扰、确保端口未被占用，并通过tasks.json封装为可中断前台任务。
VSCode 本身不运行 Webpack，也不自动触发打包；所谓“配置 Webpack”，本质是让 VSCode 正确调用、封装或调试它已有的构建逻辑——而不是在 settings.json 里加一堆保存钩子。
Webpack 项目在 VSCode 中不自动编译，该配什么？
常见错误是装 emeraldwalk.runonsave 类插件，配 webpack --mode=development 命令，结果每次保存都全量重打包，热更新失效、速度慢、还容易卡死。
- 正确做法：在终端中运行
npm run dev（对应"dev": "webpack serve --open"），由webpack-dev-server自己监听文件、提供 HMR - 确保
webpack.config.js启用了devServer.hot: true；V5+ 默认开启devServer.watchFiles，不用额外配 - VSCode 只需关闭干扰项：检查
editor.formatOnSave是否误触发了 ESLint/Prettier 的同步校验（尤其大项目下会明显卡保存）
Vite 项目为什么 Ctrl+S 没反应？
不是 VSCode 没配好，而是开发服务器根本没跑起来。Vite 的热更新是开箱即用的，不需要 loader 或 plugin 配置来“启用”它。
- 确认
package.json的scripts.dev是vite或vite dev，不是vite build或node vite.config.js - 检查端口是否被占：Vite 默认用
5173，被占时可用vite --port 3000启动 - Vite 不读
.vscode/settings.json，它的行为由vite.config.ts/js控制，比如server.hmr.overlay关闭错误遮罩、server.watch调整 chokidar 选项
如何在 VSCode 里点按钮启动 Webpack/Vite 服务？
可以，但别硬绑 CLI 命令进 tasks.json——容易卡住、无法中断、热更新断连。推荐封装成可终止的前台任务。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 在
.vscode/tasks.json中定义 task，type设为"shell"，"isBackground"不要设为true（否则 VSCode 会卡在“正在运行任务”） - 命令写成
npm run dev，不要重复实现端口检测、浏览器打开等逻辑——这些是框架自己的事 - 输出路径含中文或空格时，shell 解析可能失败；建议项目路径全英文、无空格
调试 Webpack 打包过程本身（非前端代码）
这是真· Node.js 调试场景，和调试普通 JS 脚本一样，关键在于让 Node 进程进 debugger 模式，并让 VSCode attach 上去。
- 在
package.json的scripts中新增 debug 命令，例如："debug-build": "node --inspect-brk=9229 ./node_modules/webpack/bin/webpack.js --config webpack.config.js" - 新建
.vscode/launch.json，用"type": "node"+"request": "attach"，端口与--inspect-brk一致 - 在
webpack.config.js或node_modules里的 loader/plugin 源码中加debugger，或直接在行号左侧点红点设断点
最常被忽略的是：Webpack 打包调试和前端页面调试是两套完全不同的流程——前者 attach 到 Node 进程，后者靠 pwa-chrome + sourceMap 映射到源码。混用或错配 type，基本就卡在“Debugger attached”不动了。
