Webpack 5构建后访问出现404（Cannot Get/）问题求助

核心原因 #

你通过HtmlWebpackPlugin生成的页面是auth.html和user.html，但Webpack DevServer默认访问根路径/时，会寻找index.html作为入口页面，而你的dist目录中没有这个文件，因此返回Cannot GET /。

修复步骤 #

1. 配置默认入口页面 #

两种可选方案：

• 方案一：指定默认首页
  修改其中一个HtmlWebpackPlugin的filename为index.html，让DevServer根路径指向该页面：

  new HtmlWebpackPlugin({
      title: 'PixAvenue',
      filename: 'index.html', // 将此处改为index.html
      template: './src/auth.html',
      chunks: ['auth'],
  }),
  

• 方案二：直接访问具体页面
  启动DevServer后，手动访问http://localhost:3000/auth.html或http://localhost:3000/user.html，即可看到对应页面。

2. 修复CleanWebpackPlugin导入错误 #

你当前的导入方式不符合新版本插件要求，会导致dist目录清理异常：

• 修正导入语句：

  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  

• 修正plugins中的调用：

  new CleanWebpackPlugin(),
  

3. 验证编译产物 #

执行npm run build后，检查项目根目录下的dist文件夹，确认是否生成了auth.html、user.html以及对应的auth.js、user.js文件：

• 如果没有生成，查看终端的build报错信息，检查是否缺失依赖（如html-webpack-plugin、clean-webpack-plugin是否已安装）。

4. 检查npm脚本配置 #

确认package.json中的scripts命令是否正确，比如"serv"应该对应webpack serve：

"scripts": {
  "build": "webpack",
  "watch": "webpack --watch",
  "serv": "webpack serve"
}

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