React项目经Babel+Webpack构建后，GitHub Pages部署无法访问求助

1. 修正Webpack的公共路径配置 #

GitHub Pages的访问路径带仓库名（比如https://你的用户名.github.io/你的仓库名/），Webpack默认的publicPath是根路径/，这会导致资源找不到。打开webpack.config.js，在output里加上对应仓库名的publicPath：

module.exports = {
  // 其他配置...
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/你的仓库名/' // 记得前后都加斜杠
  }
};

如果是你的个人主页仓库（也就是<用户名>.github.io），直接把publicPath设为'/'就行。

2. 执行Webpack生产构建 #

开发模式下的构建可能有缓存、未优化的资源引用，生产构建会帮你处理这些问题，直接跑命令：

npx webpack --mode production

生产构建不仅会压缩代码，还会严格按照配置生成资源路径，这能解决大部分路径导致的页面加载失败问题。

3. 用插件自动生成正确的index.html #

手动写index.html里的资源路径很容易出错，推荐用html-webpack-plugin自动生成。先安装插件：

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

然后在webpack.config.js里配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html' // 你的源index.html文件路径
    })
  ]
};

重新构建后，dist目录里的index.html会自动正确引用main.js和样式文件，不用再手动改路径。

4. 上传完整的构建产物 #

别只上传单个main.js、index.html，要把Webpack输出的整个dist目录里的文件都传到GitHub。比如dist里可能有带哈希的js文件、css文件，这些都要上传，而且要确保它们在GitHub仓库的根目录（或者你在GitHub Pages设置里指定的目录）。

5. 确认GitHub Pages的部署设置 #

进仓库的Settings -> Pages页面，检查部署分支和目录是否正确：如果构建文件在main分支的根目录，就选main分支和/(root)；如果是放在docs文件夹里，就选对应的目录。

肯定能解决大部分这类问题。生产构建会：

• 结合你配置的publicPath生成正确的资源引用路径，不会出现找不到文件的情况
• 压缩混淆代码，减少体积，避免一些开发模式下的潜在错误
• 清理旧的构建产物，确保你上传的是最新的完整文件
• 给资源文件加哈希后缀，避免浏览器缓存旧文件导致的页面异常

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