将React-Redux Webpack 2应用程序部署到github页面

Question

I have looked at all the documentation of deploy a react app to github pages and none of it has worked or is applicable. This is driving me up the wall, when Webpack is involved, but I am trying to master Webpack here.

So, I did not originally have a dist folder for my project.

Then I learned you have to put your files in a dist folder and push to gh-pages . Well, in my Github repo, I do not have that option the way the Github docs say I do. My only options are master and /docs .

This is a React 15 app with Redux and Webpack 2.

I am getting a blank browser here: https://ldco2016.github.io/JSFaddle/

It failed to load resource of bundle.js and style.css and I do not know why. I have yet to have any luck deploying to Github pages.

I tweaked my webpack to include a dist folder, but nothing is being built into it, the folder is empty.

webpack.config.js :

const path = require('path');

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    root: path.resolve(__dirname, 'src'),
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

I believe this is the root of my problem, but webpack is still a bit of a mystery to me because of the myriad of configurations you can do.

So anyone with experience deploying a non create-react-app with webpack to github pages, please reach out to me.

This continues to be a good working app in my local environment, but there is something I am not understanding in the deployment process.

To be clear, I did not previously have a dist directory when developing locally and after I created a dist directory, none of my static assets were being dumped there.

Answer 1

For hosting on GitHub pages you will have to server index.html of built react-app. So your gh-pages/master should have index.html at the root and not within some folder named as dist.

Your bundle.js is not getting generated because webpack config is incorrect. You are not specifying resource type for babel-loader to process. Please use the below config which I have corrected and tested on my local.

const path = require('path');

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    root: path.resolve(__dirname, 'src'),
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};