javascript - 如何让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/",
  ...
}

我还看了你的index.html在公共(public)文件夹中，您手动添加了 <script src=".bundle.js"></script> 。在这种情况下，我会添加 <script src="/Serify/bundle.js"></script>相反。