react hot

make-webpack-config

"use strict";
var webpack = require('webpack');

function getEntry(type) {
    var entry = ['./src/main.js'];
    //if dev then prepend dev server for autoreload
    if (type === 'dev') {
        entry.unshift('webpack/hot/dev-server');
        entry.unshift('webpack-dev-server/client?http://localhost:8081');
    }
    return entry;
}

function getPlugins(type) {
    var plugins = [new webpack.DefinePlugin({CUSTOMIZATION: "arca"})];
    if (type === 'dev') {
        plugins.push(new webpack.HotModuleReplacementPlugin());
    } else if (type === 'prod') {
        plugins.push(new webpack.optimize.UglifyJsPlugin());
        plugins.push(new webpack.optimize.DedupePlugin());
    }
    return plugins;
}

function getJsxLoaders(type) {
    var loaders = ['jsx?harmony'];
    if (type === 'dev') {
        loaders.unshift('react-hot');
    }
    return loaders;
}

module.exports = function(type) {
    return {
        entry: getEntry(type),
        output: {
            path: __dirname + '/assets',
            filename: 'bundle.js',
            publicPath: "/assets/"
        },
        plugins: getPlugins(type),
        devtool: (type === 'dev') ? "#inline-source-map" : null,
        module: {
            loaders: [
                { test: /\.js.{0,1}$/, loaders: getJsxLoaders(type) },
                { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&includePaths[]=" + __dirname + '/src/scss'},
                { test: /\.css$/, loader: "style!css"}
            ],
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        }
    };
};

server.js

"use strict";
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./make-webpack-config')('dev');

var express = require('express');
var proxy = require('proxy-middleware');
var url = require('url');

var app = express();
app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));

app.get('/*', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

var server = new WebpackDevServer(webpack(config), {
    // webpack-dev-server options
    contentBase: __dirname,

    hot: true,
    // Enable special support for Hot Module Replacement
    // Page is no longer updated, but a "webpackHotUpdate" message is send to the content
    // Use "webpack/hot/dev-server" as additional module in your entry point

    // webpack-dev-middleware options
    quiet: false,
    noInfo: false,
    publicPath: "/assets/",

    stats: { colors: true }
});

server.listen(8081, "localhost", function() {});
app.listen(8080);