试图将 webpack 推送到 gh-pages

Posted 2023-02-22

【中文标题】试图将 webpack 推送到 gh-pages

【英文标题】：Trying to push webpack to gh-pages

【发布时间】：2016-10-07 15:52:01

【问题描述】：

我尝试将使用 react/redux/webpack 构建的应用程序推送到 gh-pages。但是我在网上找到的所有内容都发现页面没有呈现。我从控制台得到的是关于 github can't get the bundle.js 文件的错误。

我想我可能会错过一些东西，但无法弄清楚。我也尝试推送到 Heroku 并获得相同的结果。

这是repository。

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>

【参考方案1】：

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

【讨论】：

我试着像你说的那样提供一个正确的路径，但这也不起作用。我用 dist 文件夹做了不知道好不好。

<script src="/dist/bundle.js"></script> 但我换成<script src="./dist/bundle.js"></script> 现在工作了，谢谢;)

【参考方案2】：

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

【讨论】：

是的，我构建了捆绑包，并且拥有 index.html，这就是我感到困惑的原因

【参考方案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