Question

我尝试使用react / redux / webpack将我的app构建推送到gh-pages。但是，我在网上发现的所有内容都显示网页无法呈现。我从控制台得到的是关于github的错误无法获取bundle.js文件。

我想我可能会错过一些但却无法理解的东西。我也尝试推送到Heroku并得到相同的结果。

的package.json

{
  "name": "twitch",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
      "start": "node server.js",
      "clean": "rimraf dist",
      "build:webpack": "NODE_ENV=production webpack --config webpack.prod.config.js",
      "build": "npm run clean && npm run build:webpack"
  },
  "keywords": [
    "redux",
    "react",
    "express",
    "api"
  ],
  "author": "Emanuel Quimper",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "body-parser": "^1.15.1",
      "css-loader": "^0.23.1",
      "cssnext-loader": "^1.0.1",
    "express": "^4.13.4",
    "jsxstyle": "0.0.18",
    "material-ui": "^0.15.0",
    "normalizr": "^2.1.0",
    "path": "^0.12.7",
    "radium": "^0.17.1",
    "react": "^15.1.0",
      "react-css-modules": "^3.7.6",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.1",
    "react-router-redux": "^4.0.4",
    "react-tap-event-plugin": "^1.0.0",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-promise-middleware": "^3.0.0",
    "request": "^2.72.0",
    "style-loader": "^0.13.1",
    "superagent": "^2.0.0-alpha.3",
    "webpack": "^1.13.1"
  },
  "devDependencies": {
    "eslint": "^2.10.2",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-babel": "^3.2.0",
    "eslint-plugin-react": "^5.1.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "react-hot-loader": "^1.3.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.10.0"
  }
}

server.js

//const webpack = require('webpack');
//const WebpackDevServer = require('webpack-dev-server');
///*>>>>>>=============================================<<<<<<*/
//const config = require('./webpack.dev.config.js');
///*>>>>>>=============================================<<<<<<*/
//const PORT = process.env.PORT || 3000;
//
//new WebpackDevServer(webpack(config), {
//  publicPath: config.output.publicPath,
//  hot: true,
//  historyApiFallback: true
//}).listen(PORT, 'localhost', (err, result) => {
//  if (err) {
//      return console.log(err);
//  }
//
//  console.log(`Listening on port ${PORT}`);
//});

const path = require('path');
const webpack = require('webpack');
const config = require('./webpack.dev.config.js');
const express = require('express');
const app = express();
const compiler = webpack(config);


app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
});

const PORT = process.env.PORT || 3000;

app.listen(PORT, 'localhost', (err) => {
    if (err) {
        console.log(err);
        return;
    }

    console.log(`Listening at http://localhost:${PORT}`);
});

webpack.prod.config.js

const path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    entry: [
        './src/js/index'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    plugins: [
        new ExtractTextPlugin('app.css', {
            allChunks: true
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false
            }
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        })
    ],

    module: {
        loaders: [
            {
                test: /\.js?$/,
                loaders: [ 'react-hot', 'babel' ],
                exclude: /node_modules/,
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'cssnext')
            }
        ]
    }
};

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Game Streaming</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css" type="text/css">
</head>
<body>
    <div id="app"></div>
    <script src="/static/bundle.js"></script>
</body>
</html>

Answer 1

页面期望bundle.js处于“静态”状态。目录。由于gh-pages不运行你的server.js，你想要手动创建静态文件夹并将bundle.js放在那里，或者从HTML文件中提供bundle.js的正确路径

Answer 2

Github Pages只能托管静态文件。您需要构建项目，然后发布生成的文件。你至少应该有index.html和bundle.js

Answer 3

要使用github页面，请将您的webpack编译为根路径/，而不是/static，/dist等。

在webpack.config.js

中看起来应该是这样的

  output: {
    filename: 'bundle.js',
    path: '/',
  },

参考：Deploying a React Webpack app (not created with create-react-app) to Github pages

试图将webpack推送到gh-pages

3 个答案: