必须使用 webpack-dev-server 启动开发服务器，它支持 HMR、sourcemap 调试和模块加载；Live Server 等插件绕过 Webpack 构建流程，导致 MIME 类型错误和断点失效。
webpack-dev-server 是唯一可行的本地服务入口
VS Code 本身不提供 HTML 文件的“保存即刷新”能力，Live Server 插件只处理静态文件，完全绕过 Webpack。想让 index.html 正确加载打包后的 bundle.js、支持 import、HMR 和 sourcemap 调试，必须用 webpack-dev-server 启动服务——它才是真正的开发服务器。
常见错误现象：Live Server 右键打开后控制台报 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"，本质是它没走 Webpack 构建流程，直接把 src/index.js 当普通 JS 加载了。
-
webpack-dev-server必须作为--save-dev依赖安装，不能只靠 VS Code 插件“启动” -
devServer.contentBase已被弃用（Webpack 5+），改用static配置指向public/或src/等静态资源目录 - HTML 文件建议放在
public/index.html，由HtmlWebpackPlugin注入 bundle 路径，避免手写<script src="dist/bundle.js"></script> - 若不用插件，手动写 HTML，
script标签的src必须匹配output.publicPath（如"/"）和output.filename（如"[name].bundle.js"）
package.json 的 serve 脚本必须显式声明
VS Code 插件（如 jasonnutter.webpack）不会自动识别或运行构建命令，它只读取你配置的 "webpack.configPath"，然后在任务面板里列出 npm run 脚本。如果你没在 package.json 里定义 "serve"，点“运行任务”会直接报错：Command "webpack-dev-server" not found。
正确写法（Webpack 5+ 推荐）：
立即学习“前端免费学习笔记（深入）”；
"scripts": {
"serve": "webpack serve --config webpack.config.js"
}
- 不要写
webpack-dev-server命令——它已被整合进webpack serveCLI - 确保
webpack.config.js中有devServer配置块，哪怕只写{ port: 9000 } - 加
--open参数可自动唤起浏览器："serve": "webpack serve --open --config webpack.config.js" - 终端里执行
npm run serve后，服务启动成功标志是看到Project is running at http://localhost:9000/
Browser Preview 插件比 Live Server 更适配 Webpack 流程
Live Server 插件只服务静态路径，不理解 Webpack 输出结构；而 Browser Preview（Microsoft 官方维护）能直接打开 http://localhost:9000，复用 Chromium 实例，支持 DevTools、网络面板、JS 断点，且页面状态（如 React 组件 state）在 HMR 时不丢失。
- 安装插件后，按
Ctrl+Shift+P→ 输入Browser Preview: Open Preview→ 粘贴http://localhost:9000 - 它不刷新整个页面，只更新变更模块，对调试体验提升明显
- 若你用
HtmlWebpackPlugin，生成的 HTML 自动注入正确路径，Browser Preview就能直接加载 bundle - 注意：它依赖本地已运行的
webpack serve，不是替代品——先npm run serve，再开预览
路径和 sourcemap 配置稍有偏差，断点就打不进 src/
即使 webpack serve 跑起来了，VS Code 里在 src/App.js 打的断点仍是灰色，大概率是 devtool 或 sourceMapPathOverrides 没对上。Webpack 默认的 eval 类型 source map，VS Code 解析不了真实路径。
- 必须在
webpack.config.js显式设devtool: "source-map"（不是"eval-source-map"） -
launch.json中的webRoot应指向构建产物所在目录，比如"${workspaceFolder}/dist"，而非"${workspaceFolder}" -
sourceMapPathOverrides要映射 webpack 内部路径到磁盘路径，典型写法："webpack:///./src/*": "${webRoot}/../src/*" - 改完配置后，必须重启
npm run serve，否则新 sourcemap 不生效
真正卡住人的地方往往不是 webpack 配置本身，而是 VS Code 终端没读到 Node 环境、package.json 脚本名拼错、或者 publicPath 和实际 HTTP 路径不一致——这些细节错一个，HTML 就加载不到 JS，连控制台报错都看不到。
