使用webpack构建的项目无法通过GitHub Pages发布并报404错误是什么原因？

• 核心原因：你当前的Webpack配置仅会打包JS和CSS资源到build目录，没有将入口HTML文件打包进输出目录，gh-pages部署的目录下不存在index.html作为站点入口，因此访问时返回404错误，并非依赖缺失导致的问题。
• 次要注意点：GitHub Pages站点部署在子路径/shoppingCart/下，若静态资源路径配置错误，后续也可能出现资源加载失败的问题。

1. 安装HTML处理插件
   执行命令安装html-webpack-plugin，用于将入口HTML文件自动打包到输出目录：

npm install html-webpack-plugin --save-dev

2. 修改webpack.config.js配置
   更新配置如下，新增HTML插件引入、publicPath路径配置：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 新增引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",
  entry: "./src/script.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname,"./build"),
    // 新增publicPath配置，适配GitHub Pages子路径
    publicPath: '/shoppingCart/'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "styles.css",
    }),
    // 新增HTML插件配置，和你本地的HTML模板路径对应即可
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ],
  module: {
    rules: [
        {
          test:/\.css$/,
          use:[
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader"
        ]
        }
    ]
  }
}

3. 验证打包结果后重新部署
   执行npm run build，检查生成的build目录中是否存在index.html文件，确认存在后再执行npm run deploy部署。
4. 检查GitHub Pages配置
   进入仓库的Settings → Pages页面，确认部署源选择的是gh-pages分支、目录为根目录，配置修改后最多等待10分钟即可生效。

内容的提问来源于stack exchange，提问作者e-d-i