Hot reload with webpack-rails, react, and relay

.babelrc

/* ./babelrc */
{
  "plugins": ["./babelRelayPlugin"],
  "presets": ["react", "es2015", "stage-0"],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }]
      ]
    }
  }
}

babelRelayPlugin.js

/* ./babelRelayPlugin.js */
var fs = require('fs');
var path = require('path');
var jsonFile = './schema.json';

fs.access(jsonFile, fs.F_OK, function (err) {
  if (!err) module.exports = require('babel-relay-plugin')(require(jsonFile).data);
});

webpack-dev-server.js

/* webpack-dev-server */
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const chalk = require('chalk');
const webpackConfig = require('./config/webpack.config.js');


const webpackDev = new WebpackDevServer(webpack(webpackConfig), {
  contentBase: '/webpack/',
  stats: {
    colors: true
  },
  hot: true,
  historyApiFallback: true,
  publicPath: '/webpack/'
});

webpackDev.listen(3808, () => console.log(chalk.green(`Webpack is listening on port 3808')));

webpack.config.js

/* ./webpack.config.js */
'use strict';

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const normalize = require('postcss-normalize');
const colorFunction = require('postcss-color-function');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var StatsPlugin = require('stats-webpack-plugin');

// must match config.webpack.dev_server.port
var devServerPort = 3808;

var production = process.env.NODE_ENV === 'production';

const mainApp = {
  entry: {
    app: ['./webpack/index.js'],
    vendor: ['react', 'react-dom', 'react-relay', 'react-router', 'react-router-relay', 'jquery', 'react-fastclick']
  },
  output: {
    path: path.join(__dirname, '..', 'public', 'webpack'),
    filename: '[name].js',
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
    },
    {
      test: /\.scss$/,
      loaders: [
        'style',
        'css?modules&importLoaders=1' +
          '&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
      ]
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'url-loader?limit=10000&name=assets/[hash].[ext]'
    }],
    include: ['./webpack/client']
  },
  plugins: [
    new StatsPlugin('manifest.json', {
      // We only need assetsByChunkName
      chunkModules: false,
      source: false,
      chunks: false,
      modules: false,
      assets: true
    })
  ],
}

if (production) {
  mainApp.output.publicPath = '/webpack/'
  mainApp.devtool = 'source-map';
  mainApp.production = true;
  mainApp.module.loaders.push({
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader', 'postcss-loader']
  })
  mainApp.postcss = () => [normalize, precss, colorFunction, autoprefixer]  
  mainApp.plugins.unshift(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true
      }
    })
  );
  mainApp.plugins.unshift(new webpack.optimize.OccurrenceOrderPlugin());
  mainApp.plugins.unshift(new webpack.optimize.DedupePlugin());
  mainApp.plugins.unshift(
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    })
  );    
} else {
  mainApp.entry.app.push('webpack-dev-server/client?http://localhost:3808');
  mainApp.entry.app.push('webpack/hot/only-dev-server');
  mainApp.output.publicPath = 'http://localhost:3808/webpack/'
  mainApp.devtool = 'cheap-eval-source-map';
  mainApp.devServer = {
    port: devServerPort,
    headers: { 'Access-Control-Allow-Origin': '*'}
  }
  mainApp.postcss = () => [precss, colorFunction, autoprefixer]
  mainApp.plugins.unshift(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    })
  );
  mainApp.plugins.unshift(new webpack.HotModuleReplacementPlugin());
  mainApp.plugins.unshift(new webpack.NoErrorsPlugin());
}

module.exports = mainApp;