Webpack + Babel + React Hot Loader 3

.babelrc

{
  "presets": ["es2015", "react", "stage-0"],
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel",
        [ "babel-plugin-webpack-alias", { "config": "./webpack/config.js" } ]
      ]
    },
    "production": {
      "plugins": [
        [ "babel-plugin-webpack-alias", { "config": "./webpack/config.js" } ]
      ]
    }
  }
}

index.dev.js

import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { browserHistory } from 'react-router'
import { reduxReactRouter } from 'redux-router'
import injectTapEventPlugin from 'react-tap-event-plugin'

import { configureStore } from 'store'
import { fetchProfile } from 'actions/user'
import cookie from 'utils/cookie'
import Root from 'containers/Root'

// needed for material ui onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin()

// initial state for redux store
const token = cookie.get('token')
const mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent)
const device = { mobile }
const fullscreen = false
const initialState = Object.assign({}, window.__INITIAL_STATE__, {
  app: { fullscreen, device },
  user: { token },
})

// create router and store
const createHistory = () => browserHistory
const router = reduxReactRouter({ createHistory })
const store = configureStore(router, initialState)

// render react app function
const renderReactApp = () => {
  render(
    <AppContainer>
      <Root store={store} />
    </AppContainer>,
    document.getElementById('root')
  )
}

// in development we need to load user if token is present
// this way user is already loaded when we render the app
// if token is not available, simply render react app
if (token) {
  store.dispatch(fetchProfile()).then(renderReactApp)
} else {
  renderReactApp()
}

// enable react hot loader
if (module.hot) {
  module.hot.accept('containers/Root', () => {
    const NextRoot = require('containers/Root').default
    render(
      <AppContainer>
        <NextRoot store={store} />
      </AppContainer>,
      document.getElementById('root')
    );
  });
}

webpack-dev-server.js

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var webpackConfig = require('./config.dev')
var config = require('../config')

new WebpackDevServer(webpack(webpackConfig), {
  publicPath: webpackConfig.output.publicPath,
  hot: true,
  quiet: false,
  noInfo: false,
  historyApiFallback: true,
  stats: { colors: true }
}).listen(config.dev.port, config.dev.host, function (err, result) {
  if (err) return console.log(err)
  console.log(`==> Development server running on ${config.dev.url}`)
})

webpack.config.dev.js

var path = require('path')
var webpack = require('webpack')
var config = require('../config')

module.exports = {
  name: 'client',
  target: 'web',
  devtool: 'cheap-module-inline-source-map',
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?' + config.dev.url,
    'webpack/hot/only-dev-server',
    path.resolve(__dirname, '..', 'client', 'index'),
  ],
  output: {
    path: path.resolve(__dirname, '..', 'dist'),
    filename: 'app.js',
    publicPath: '/static/',
  },
  resolve: {
    extensions: ['', '.js', '.scss', '.css'],
    alias: {
      config: path.resolve(__dirname, '..', 'config'),
      actions: path.resolve(__dirname, '..', 'client', 'actions'),
      components: path.resolve(__dirname, '..', 'client', 'components'),
      containers: path.resolve(__dirname, '..', 'client', 'containers'),
      reducers: path.resolve(__dirname, '..', 'client', 'reducers'),
      routes: path.resolve(__dirname, '..', 'client', 'routes'),
      selectors: path.resolve(__dirname, '..', 'client', 'selectors'),
      store: path.resolve(__dirname, '..', 'client', 'store'),
      styles: path.resolve(__dirname, '..', 'client', 'styles'),
      utils: path.resolve(__dirname, '..', 'client', 'utils'),
    },
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel?cacheDirectory'],
      exclude: /(node_modules)/,
      include: path.resolve(__dirname, '..', 'client'),
    },{
      test: /\.(scss)$/,
      loader: 'style!css?sourceMap!postcss!sass?sourceMap',
    },{
      test: /\.(png|jpg|svg|woff|woff2|eot|ttf)$/,
      loader: 'url-loader?limit=100000',
    }]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, '..', 'client', 'styles')],
  },
  postcss: function() {
    return [
      require('autoprefixer'),
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      },
      __DEV__: true,
      __PROD__: false
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
}