VSCode运行html搭配Webpack本地服务的配置-VSCode-PHP中文网

必须使用 webpack-dev-server 启动开发服务器，它支持 hmr、sourcemap 调试和模块加载；live server 等插件绕过 webpack 构建流程，导致 mime 类型错误和断点失效。

vscode运行html搭配webpack本地服务的配置

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+ 推荐）：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

"scripts": {
  "serve": "webpack serve --config webpack.config.js"
}

不要写 webpack-dev-server 命令——它已被整合进 webpack serve CLI
确保 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 不生效