VS Code 本身不提供 Webpack 自动编译预览能力，核心依赖 webpack-dev-server：它启动本地服务、监听文件变化、触发重打包，并通过 HMR 或 liveReload 刷新浏览器；插件仅辅助配置、调用命令，不参与构建。
VS Code 本身不提供 Webpack 自动编译预览能力，必须靠 webpack-dev-server 启动开发服务，再配合浏览器插件或内置预览工具实现“保存即刷新”——插件只是帮你调用命令、高亮配置、跳转错误，不替代构建逻辑。
webpack-dev-server 是自动编译预览的核心
所有“实时预览”效果都依赖它，不是 VS Code 插件本身的功能。它启动一个本地 HTTP 服务，监听文件变化、触发重新打包，并通过 hot 或 liveReload 通知浏览器更新。
-
webpack-dev-server必须安装为--save-dev依赖，不能只靠 VS Code 插件“模拟” - 配置中
devServer.contentBase指向的是静态资源根目录（通常是dist），不是源码目录 -
devServer.hot: true开启模块热替换（HMR），但仅对支持 HMR 的代码生效（比如 React 组件需额外配置react-refresh） - 若改了
webpack.config.js本身，webpack-dev-server不会自动重启，得手动 Ctrl+C 再npm run serve
VS Code 插件只负责“连接”和“辅助”，不负责“构建”
所谓“Webpack 插件”在 VS Code 里实际作用很有限：识别 webpack.config.js 路径、提供语法提示、绑定 npm run build 或 webpack-dev-server 命令到任务面板。它不会监听文件、不会启动服务、也不会注入 HMR runtime。
- 插件如
webpack（jasonnutter.webpack）只读取"webpack.configPath"设置，不执行任何构建 - 如果你没在
package.json里定义"serve": "webpack-dev-server --open"，插件点“运行任务”会直接报错Command "webpack-dev-server" not found - 插件无法绕过 Node.js 环境——你在纯浏览器环境或 Codespaces 里没装 Node，插件就完全失效
- 调试时看到的错误堆栈来自 webpack CLI 或 dev-server，不是插件生成的
真正能边写边看的组合只有两种可靠方式
别被“插件支持实时预览”这类宣传误导。实操中只有下面两种路径稳定可用，其余都是半残或依赖特定框架：
-
本地服务 + Browser Preview 插件：启动
npm run serve后，在 VS Code 内用Browser Preview插件打开http://localhost:9000，它复用 Chromium 实例，支持 DevTools、网络监控、断点，且不刷新页面也能保留 JS 状态 -
Live Server（仅限简单 HTML/JS）：适合没有构建流程的静态页，右键
Open with Live Server，但它不理解import、不走 webpack 打包，改了src/index.js不会触发重新构建，只刷新 HTML - 注意：
AutoPreview这类组件级预览插件，本质是用import()动态加载当前文件并挂载到 iframe，它绕过了 webpack 构建，所以看不到 CSS Modules 生效、也测不了 Tree Shaking 效果
最容易被忽略的一点：webpack 的 output.publicPath 和 devServer.publicPath 不一致时，浏览器会 404 加载 bundle.js，但控制台只报 Failed to load resource，不会提示你该去对齐这两个值。
