React Router 4, React -> Preact for production, Async route-based code-splitting.

index.js

import React from 'react'
import { render } from 'react-dom';
import { Router, Route } from 'react-router-dom';
import LazyRoute from 'lazy-route';

const App = () => {
  render() {
    return (
      <Router>
        <Route
          exact
          path="/"
          render={(props) => (
            <LazyRoute
              {...props}
              component={System.import('pages/home')}
            />
          )}
        />
        <Route
          path="/about"
          render={(props) =>(
            <LazyRoute
              {...props}
              component={System.import('pages/about')}
            />
          )}
        />
        <Route
          path="/work"
          render={(props) => (
            <LazyRoute
              {...props}
              component={System.import('pages/work')}
            />
          )}
        />
      </Router>
    );
  }
}

render(<App />, document.getElementById('root'));

package.json

{
  "name": "stuff_and_things",
  "version": "1.0.0",
  "description": "This is where the magic happens",
  "scripts": {
    "build": "rimraf ./dist && NODE_ENV=production webpack --progress -p",
    "dev": "NODE_ENV=development webpack-dev-server --inline",
  },
  "author": "Tyler Kelley – @_tkwd",
  "license": "Do what you will, but credit me with a lymric.",
  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.0.0",
    "babel-jest": "^16.0.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-class-properties": "^6.16.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.16.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.25.0",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "imports-loader": "^0.6.5",
    "lazy-route": "^1.0.7",
    "preact": "^7.2.0",
    "preact-compat": "^3.13.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "4.0.0-beta.3",
    "react-router-dom": "4.0.0-beta.5",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-dashboard": "^0.2.1",
    "webpack-dev-server": "^2.3.0",
    "webpack-merge": "^0.14.1",
  }
}

webpack.config.js

/* eslint-disable */
const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');

const src = path.resolve(__dirname, 'src');
const dist = path.resolve(__dirname, 'dist');

const isProduction = process.env.NODE_ENV === 'production';


/**
 * Base
 */
const baseConfig = {
  entry: {
    app: `${src}/index.js`,
  },
  output: {
    path: dist,
    filename: '[name].[chunkhash].js',
  },
  resolve: {
    extensions: ['.js', '.json', '.css'],
    modules: [src, 'node_modules'],
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        include: [src],
        exclude: ['node_modules'],
        loader: 'babel-loader'
      },
      {
        test: /\.css?$/,
        include: [src],
        exclude: ['node_modules'],
        loader: ['style-loader', 'css-loader']
      },
      {
        test: /\.(bmp|gif|png|jpg|jpeg|svg)?$/,
        loader: ['url-loader?limit=1024'],
      }
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
    }),
    new webpack.NoEmitOnErrorsPlugin(),
  ]
};


/**
 * Development
 */
const developmentConfig = merge.smart(baseConfig, {
  cache: true,
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack/hot/only-dev-server',
    './src/index.js',
  ],
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '/dist'),
    publicPath: '/dist',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new DashboardPlugin(),
  ],
  devServer: {
    compress: true,
    historyApiFallback: {
      index: '/'
    },
    host: 'somedomain.com',
    hot: true,
    port: 3000,
    stats: { colors: true },
  }
});


/**
 * Production
 */
const productionConfig = merge.smart(baseConfig, {
  entry: {
    vendors: [
      'react-redux',
      'react-router',
      'redux',
    ]
  },
  output: {
    filename: '[name].[hash].js',
    chunkFilename: '[name].[chunkhash].js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.LoaderOptionsPlugin({
      debug: false,
      minimize: true,
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      filename: 'vendors.[hash].js',
      minChunks: Infinity,
    }),
    new HtmlWebpackPlugin({
      template: 'production.html',
      inject: true,
      hash: false,
    }),
    new ExtractTextPlugin('styles.[hash].css'),
  ],
  resolve: {
    alias: {
      'react': 'preact-compat/dist/preact-compat',
      'react-dom': 'preact-compat/dist/preact-compat',
    }
  }
});


module.exports = isProduction ? productionConfig : developmentConfig;