Развертывание приложения React-Redux Webpack 2 на страницах github

Question

Я просмотрел всю документацию по развертыванию приложения реакции на страницах github, и ни одна из них не работала или не применима.Это ведет меня к стене, когда задействован Webpack, но я пытаюсь освоить Webpack здесь.

Итак, у меня изначально не было папки dist для моего проекта.

Затем я узнал, что вы должны поместить свои файлы в папку dist и нажать gh-pages.Что ж, в моем репозитории Github у меня нет такой опции, как это делают документы Github.Мои единственные варианты: master и /docs.

Это приложение React 15 с Redux и Webpack 2.

У меня пустой браузер: https://ldco2016.github.io/JSFaddle/

Не удалось загрузить ресурс bundle.js и style.css, и я не знаю почему.Мне еще не повезло с развертыванием на страницах Github.

Я настроил свой веб-пакет, добавив в него папку 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: './'
  }
};

Я считаю, что это корень моей проблемы, но веб-пакет все еще остается для меня загадкой из-за множества конфигураций, которые вы можете сделать.

Так что любой, у кого естьОпыт развертывания не create-react-app с веб-пакетом на страницах Github, пожалуйста, свяжитесь со мной.

Это продолжает быть хорошим рабочим приложением в моей локальной среде, но есть кое-что, чего я не понимаю в процессе развертывания.

Для ясности, у меня ранее не было каталога dist при локальной разработке, и после создания каталога dist ни один из моих статических ресурсов туда не сбрасывался.

Answer 1

Для размещения на страницах GitHub вам потребуется сервер index.html встроенного реагирующего приложения.Таким образом, ваш gh-pages / master должен иметь index.html в корне, а не в какой-то папке с именем dist.

Ваш bundle.js не генерируется, потому что конфигурация webpack неверна.Вы не указываете тип ресурса для обработки 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: './'
  }
};