Webpack-rails with hot module reloading (HMR)

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');
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: [...],
  },
  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.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.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;