如何让 gh-pages 找到 bundle.js

Question

我正在尝试将 webpack React 应用程序部署到我的 gh-pages。

这是我用来构建和部署的脚本。

  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch": "webpack-dev-server --progress",
    "deploy": "gh-pages -d dist"
  },

运行之后：

npm run build
npm run deploy

我的 /dist/ 文件夹部署到 gh-pages 分支。 https://github.com/Damhan/Serify/tree/gh-pages

导航到 https://damhan.github.io/Serify/ 时页面是空白的。

控制台显示以下错误：

Failed to load resource: the server responded with a status of 404 (Not Found) bundle.js:1

这是我的 webpack 配置：

const path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/index.js"),
    output: {
      filename:"bundle.js",
      path: path.resolve(__dirname, '/dist')
    },
    module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          },
          {
            test: /\.s[ac]ss$/i,
            use: [
              // Creates `style` nodes from JS strings
              'style-loader',
              // Translates CSS into CommonJS
              'css-loader',
              // Compiles Sass to CSS
              'sass-loader',
            ],
          },
          {
            test: /\.css$/,
            loaders: ["style-loader", "css-loader"]
          }
        ]
    },
    devServer: {
      contentBase: path.join(__dirname, "/dist"),
      historyApiFallback:true

    }


};

Answer 1

我相信当您运行构建和部署时，它认为您的主页在 / 上。但实际上，您的主页是https://damhan.github.io/Serify/。

在package.json中添加：

{
  "name": "serify",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://damhan.github.io/Serify/",
  ...
}

另外我在public文件夹中查看了你的index.html，你手动添加了<script src=".bundle.js"></script>。在这种情况下，我会改为添加 <script src="/Serify/bundle.js"></script>。

如何让 gh-pages 找到 bundle.js

How to get gh-pages to find bundle.js

javascript

bundle

github-pages

reactjs

webpack