正确做法是在终端运行 npm run dev（对应 webpack serve 或 vite），由构建工具自身监听文件并热更新，vscode 仅需确保未干扰保存行为、端口未被占用，并通过 tasks.json 封装为后台任务。
Webpack 项目在 VSCode 中不自动编译，该配什么？
VSCode 本身不运行 Webpack，它只负责编辑和调用终端命令。所谓“自动化构建”，本质是让 Webpack 在文件保存时监听并重新打包——这得靠 webpack-dev-server 或 webpack serve 启动开发服务器，而非单纯配置 VSCode 设置。
常见错误是往 settings.json 里加一堆 files.associations 或 emeraldwalk.runonsave 类插件去触发 webpack --mode=development，结果每次保存都全量重打包，慢且热更新失效。
- 正确做法：在终端中运行
npm run dev（对应"dev": "webpack serve --open"），让 Webpack 自己接管监听逻辑 - 确保
webpack.config.js中启用了devServer.hot: true和devServer.watchFiles（V5+ 默认启用） - VSCode 只需关闭自带的保存后自动格式化干扰：检查
editor.formatOnSave是否误触发了 ESLint 或 Prettier 的耗时校验
Vite 项目开箱即用，但为什么 Ctrl+S 没反应？
Vite 的 vite 命令默认就带文件监听和 HMR，不需要额外配 Webpack 那套 loader 或 plugin。如果保存没反应，大概率是终端没跑起来，或端口被占。
注意 Vite 的启动命令不是 vite build（那是生产打包），而是 vite 或 vite dev。VSCode 内置终端里执行后，它会自动打开浏览器并响应保存。
- 检查
package.json的scripts.dev是否为vite，而不是vite build或node vite.config.js - 确认没有其他进程占用了
5173端口（Vite 默认端口），可改用vite --port 3000 - Vite 不读取
.vscode/settings.json里的构建配置，它的行为由vite.config.ts/js控制，比如server.hmr.overlay关闭错误遮罩、server.watch调整底层 chokidar 选项
想在 VSCode 里点按钮启动构建，而不是敲命令？
可以，但别用“运行任务”硬绑 webpack CLI，容易卡死或无法热更新。推荐用 VSCode 的 tasks.json 封装成可中断的前台任务。
在项目根目录建 .vscode/tasks.json，内容如下：
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "vite:dev",
"command": "npm run dev",
"isBackground": true,
"problemMatcher": [],
"group": "build",
"presentation": {
"echo": true,
"reveal": "silent",
"focus": false,
"panel": "shared",
"showReuseMessage": true,
"clear": false
}
}
]
}
之后按 Ctrl+Shift+P → 输入 “Tasks: Run Task” → 选 vite:dev 即可。关键点：
-
"isBackground": true让任务持续运行，不自动退出 -
"panel": "shared"复用同一个终端面板，避免每次新开窗口 - 不要配
problemMatcher解析 Webpack 错误（Vite 的报错直接输出在终端，无需匹配）
为什么改了代码，浏览器没刷新，但控制台显示“reloaded”？
这是 HMR（模块热替换）和 Live Reload 混淆的典型表现。Webpack/Vite 默认启用 HMR，它只替换变更模块、不刷新页面；而你可能期望的是整个页面重载（Live Reload）。
HMR 依赖框架支持（如 React 的 @vitejs/plugin-react、Vue 的 @vitejs/plugin-vue）。如果没装对应插件，或组件导出方式不标准（比如用了 export default function MyComp() 但没用 defineComponent 包裹），HMR 就会退化为警告 + 无操作。
- Vite 项目务必检查
vite.config.ts是否引入了对应框架插件，且版本与框架匹配（如 Vue 3 用@vitejs/plugin-vue，不是@vitejs/plugin-vue2） - Webpack 项目若用 React，需确认
react-refresh-webpack-plugin已安装并注入到plugins数组，且 Babel 配置启用了react-refresh/babel - 浏览器控制台出现
[HMR] Waiting for update signal from WDS...表示 Webpack Dev Server 正常，但前端未接入 HMR 客户端脚本——检查 HTML 中是否漏了entry里加webpack-hot-middleware/client
vite 进程，或者把 vite build 当成了开发命令。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
