部署React到GitHub Pages时JS Bundle路径错误求助

• 配置webpack的publicPath
  在你的webpack.prod.js配置文件中，修改或添加output字段内的publicPath，值设为GitHub Pages仓库对应的路径前缀。比如你的homepage是https://{gitname}.github.io/{gitrepo}，则配置如下：

const path = require('path');

module.exports = {
  // 其他已有配置...
  output: {
    filename: 'main.bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/{gitrepo}/' // 替换为你的实际仓库名
  }
};

webpack会基于这个配置，自动给所有资源引用路径加上前缀，包括index.html里的脚本链接。

• 动态读取publicPath（可选）
  如果不想硬编码仓库名，可以从package.json的homepage字段自动解析路径，避免后续修改homepage时重复调整webpack配置：

const path = require('path');
const packageInfo = require('./package.json');
// 从homepage中提取路径部分
const repoPath = new URL(packageInfo.homepage).pathname;

module.exports = {
  // 其他已有配置...
  output: {
    filename: 'main.bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: repoPath
  }
};

• 验证与重新部署
  执行npm run build后，打开dist/index.html检查脚本路径是否已变为/{gitrepo}/main.bundle.js，确认无误后再运行npm run deploy完成部署。

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