使用Webpack 5启动webpack-dev-server时出现Cannot GET /错误求助

使用Webpack 5执行npm start启动webpack-dev-server并启用热重载时，页面显示**Cannot GET /**错误，控制台Webpack输出无报错，以下是配置文件中存在的问题及修复方案：

配置文件问题分析与修复 #

1. 入口文件路径错误 #

webpack.common.js中entry的路径写法存在问题：

entry: {
  bundle: path.resolve(__dirname, "/src/index.js"),
},

path.resolve的第二个参数如果以/开头会被视为绝对路径，直接忽略__dirname，导致Webpack无法定位到正确的入口文件，dev-server无法生成有效bundle，最终访问根路径返回404。

修复：
改为相对路径写法：

entry: {
  bundle: path.resolve(__dirname, "src", "index.js"),
  // 或使用path.join：path.join(__dirname, "src/index.js")
},

2. DevServer 配置缺失 #

webpack.dev.js中的devServer配置存在两处问题：

• 开发模式下webpack-dev-server默认从内存编译文件，无需指向本地dist目录；
• 已添加HotModuleReplacementPlugin，但未在devServer中启用热重载配置。

修复：
调整devServer配置，指定静态资源目录并开启热重载（若为SPA应用，同时开启路由回退）：

devServer: {
  static: path.resolve(__dirname, "public"), // 指向public目录加载静态资源
  hot: true, // 启用热重载
  historyApiFallback: true, // SPA应用必备，解决路由刷新404问题
},

3. HtmlWebpackPlugin 无效参数 #

webpack.common.js中HtmlWebpackPlugin的manifest参数属于无效配置，该插件不支持此选项，可直接删除：

new HtmlWebpackPlugin({
  favicon: "./public/favicon.ico",
  template: path.join(__dirname, "public", "index.html"),
  // 移除：manifest: "./public/manifest.json"
}),

验证修复 #

修改完成后重新执行npm start，控制台会显示编译成功日志，浏览器打开后根路径/即可正常加载页面。

内容的提问来源于stack exchange，提问作者Jaya Prakash