webpack-dev-server启动后访问localhost:8080返回Cannot GET /报错

首先排除端口占用可能 #

如果8080端口被其他程序占用，webpack-dev-server启动时会直接抛出EADDRINUSE错误，不会正常输出服务运行成功的日志，因此你遇到的问题和端口占用无关。

问题根因 #

你使用的是webpack 5 + webpack-dev-server 4.x版本，在无配置文件的场景下默认行为如下：

• 默认入口为项目根目录下的src/index.js
• 打包产物仅存在内存中，仅会生成js文件，不会自动生成index.html入口页
• webpack-dev-server 4.x不会自动提供默认的根路径响应内容，因此直接访问http://localhost:8080时找不到对应资源，返回Cannot GET /

排查解决流程 #

• 第一步：校验基础目录结构
  确认项目根目录下存在src文件夹，且src下存在index.js文件（可以随便写入测试代码如console.log('测试内容')），这是webpack零配置场景下的默认入口，缺失的话先补上。

• 第二步：验证dev server运行状态
  直接访问http://localhost:8080/main.js，如果能正常返回js代码内容，说明dev server本身运行完全正常，仅缺失HTML入口文件。

• 第三步：配置HTML入口（二选一即可）

  方案1：使用html-webpack-plugin自动生成入口 #

  1. 安装依赖：执行命令npm install html-webpack-plugin -D
  2. 项目根目录新建webpack.config.js，写入如下配置：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    mode: 'development',
    plugins: [new HtmlWebpackPlugin()]
  };
  

  3. 重新执行npm run start，再次访问http://localhost:8080即可正常访问。

  方案2：降级webpack-dev-server到3.x版本 #

  你参考的教程大概率使用的是3.x版本的webpack-dev-server，该版本在零配置场景下会自动生成默认入口页。执行命令npm install webpack-dev-server@3.11.2 -D，安装完成后重新启动服务即可。

可选排查项 #

如果上述操作后仍有问题，可以先注释你之前在hosts文件中新增的配置，确认localhost正常解析到127.0.0.1后重试，当前场景下hosts配置异常的概率极低。

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