本文详细解析 webpack-dev-server 启动报错及页面无法访问的常见原因，重点介绍 package.json 中 server 命令的正确写法（--inline --content-base），以及 webpack.config.js 中 publicPath 的配置方法，实现修改 JS 代码后浏览器自动同步更新。
问题背景与排查思路
近期在研究 webpack 时，遇到 webpack-dev-server 无法正常运行的问题。尽管服务器日志显示启动成功，但在浏览器访问 localhose:8080/admin 时却提示 Get/... 错误，导致页面无法打开。经过排查发现，问题出在启动服务器的代码配置上。
首先，需要安装 webpack 相关组件。
环境安装与项目结构
cnpm i webpack-dev-server --save-dev
cnpm i webpack --save-dev具体安装代码如下：
项目目录结构如下所示：
Webpack 配置文件详解
其次是 webpack.config.js 配置文件的内容。
由于项目中定义了两个 JavaScript 文件，因此需要在入口配置中定义两个名称，分别打包生成两个 bundle.js 文件。
动态生成的文件存放于 dist 文件夹中，因此配置 publicPath:"/dist/" 用于监听该文件夹内的文件变化。当手动更新 admin 和 customer 文件夹下的 index.js 时，系统会自动更新对应的 bundle.js，页面随之自动刷新。
接下来是 package.json 的配置部分。
服务器启动命令配置
这里需要特别注意，启动服务器的正确命令应为 "server":"webpack-dev-server --inline --content-base"。
此前使用的其他三种方式（如下所示）可能是旧版本的写法，在 webpack 2.0 及以上版本中可能不再支持，具体兼容性未做进一步查阅。
"server":"webpack-dev-server --inline --hot",
"server":"webpack-dev-server --inline",
"server":"webpack-dev-server"
执行步骤与效果验证
执行相关命令的步骤如下：
首先输入 “npm start” 以生成两个 bundle.js 文件。
接着输入 “npm run server” 或者直接使用命令 “webpack-dev-server --inline --content-base” 启动服务。
最后，在浏览器地址栏输入 localhose:8080/admin 或 localhose:8080/customer 即可访问对应的页面。
修改对应页面的 JS 代码后，页面会自动同步并立即更新。
以上就是 webpack-dev-server 实现页面自动更新的完整配置方法，希望能为读者提供参考和支持。