Question

我查看了将React应用程序部署到github页面的所有文档，但没有一个起作用或不适用。涉及Webpack时，这使我无所适从，但我试图在此处掌握Webpack。

因此，我最初没有用于项目的dist文件夹。

然后，我了解到您必须将文件放入dist文件夹中并推送到gh-pages。好吧，在我的Github存储库中，我没有Github文档说的那样的选择。我唯一的选择是master和/docs。

这是带有Redux和Webpack 2的React 15应用。

我在这里得到一个空白的浏览器： https://ldco2016.github.io/JSFaddle/

它无法加载bundle.js和style.css的资源，我不知道为什么。我还没有运气部署到Github页面。

我对Webpack进行了调整，以包含一个dist文件夹，但是没有内置任何内容，该文件夹为空。

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: './'
  }
};

我相信这是我问题的根源，但是由于您可以进行多种配置，因此webpack仍然对我来说还是个谜。

因此，任何有使用webpack部署非create-react-app到github页面的经验的人，请与我联系。

在我的本地环境中，这仍然是一个不错的应用程序，但是在部署过程中有些我不了解。

请注意，在本地开发时，我以前没有dist目录，在创建dist目录之后，没有任何静态资产被转储到那里。

Answer 1

要在GitHub页面上托管，您将必须服务器构建的react-app的index.html。因此，您的gh-pages / master应在根目录而不是在名为dist的文件夹中具有index.html。

由于webpack配置不正确，因此未生成您的bundle.js。您没有为babel-loader指定要处理的资源类型。请使用下面的配置，该配置我已经在本地进行了更正和测试。

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: './'
  }
};

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

1 个答案: