index.js

const express = require('express');
const path = require('path');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const proxy = require('proxy-middleware');
const url = require('url');
const webpackConfig = require('../../webpack.config');
const compile = require('./compile');
const argv = require('optimist').argv; 
const app = express();

const lang = argv.language || 'en';
const environment = argv.environment;
const external = argv.external ? 'external' : undefined;

webpackConfig.output.path = '/';
webpackConfig.devtool = 'inline-source-map';
webpackConfig.plugins.pop();

app.use('/m/public', express.static(path.join(__dirname, 'public')));
app.use('/m/public/sw.js', function(req, res, next) {
  res.setHeader('Service-Worker-Allowed', '/m');
  next();
});

const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: false,
  noInfo: false,
  stats: {
    colors: true,
    assets: false,
    version: false,
    hash: false,
    timings: false,
    chunks: false,
    chunkModules: false,
    children: false,
  },
}));


function serve(req, res) {
  compile.compile(function(output) {
    res.send(output);
  }, lang, external);
}

app.get('/m', serve);
app.get('/m/*', serve);

const proxyOptions = url.parse(environment);
proxyOptions.cookieRewrite = 'localhost';

app.use(proxy(proxyOptions));

const port = 3000;

app.listen(port);
console.log('Listening on port ' + port); // eslint-disable-line no-console

ServiceWorkerPlugin.js

'use strict';
const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
const webpack = require('webpack');
const CHILD_COMPILER_NAME = 'service-worker-plugin';

class ServiceWorkerPlugin {

  constructor(options) {
    this.options = options;
  }

  apply(compiler) {

    compiler.plugin('emit', (compilation, callback) => {
      const stats = compilation.getStats().toJson();
      const child = compilation.createChildCompiler(CHILD_COMPILER_NAME, {
        filename: this.options.output,
      });

      child.plugin('compilation', (childCompilation) => {
        childCompilation.cache = {};
      });

      child.apply(
        new SingleEntryPlugin(compiler.context, this.options.entry, this.options.output)
      );

      child.apply(
        new webpack.DefinePlugin({
          SHA: JSON.stringify(process.env.CI_COMMIT || 'unreleased'),
          ASSETS: JSON.stringify(stats.assets.map((asset) => `/m/public/${asset.name}`).filter((name) =>  !name.endsWith('.map'))),
        })
      );


      child.runAsChild((err) => {
        if (err) callback(err);
        callback();
      });
    });
  }
}

module.exports = ServiceWorkerPlugin;

webpack.config.js

var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var simpleVars = require('postcss-simple-vars');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ServiceWorkerPlugin = require('./scripts/tools/ServiceWorkerPlugin');
var Colors = require('./src/constants/Colors');

var env = new webpack.DefinePlugin({
  'process.env': {NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')}
});

var useReactOptimize = process.env.NODE_ENV === 'production';
var useReactHelperTransforms = process.env.NODE_ENV !== 'production';

module.exports = {
  entry: {
    main: './src/bootstrap',
    'main-external': './src/bootstrap-external'
  },
  output: {
    filename: '[name].js',
    chunkFileName: '[name].js',
    path: 'compiled/public',
    publicPath: '/m/public/'
  },
  module: {
    loaders: [
      {
        test: /(src|test)(.+)\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          cacheDirectory: true,
          plugins: [
            useReactOptimize && ['babel-plugin-transform-react-constant-elements'],
            useReactOptimize && ['babel-plugin-transform-react-inline-elements'],
            useReactOptimize && ['babel-plugin-transform-react-remove-prop-types'],
            useReactHelperTransforms && ['babel-plugin-transform-react-jsx-source'],
            useReactHelperTransforms && ['babel-plugin-transform-react-jsx-self'],
          ].filter(Boolean),
        }
      },
      { test: /\.global\.css$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader') },
      { test: /\.css$/, exclude: /\.global\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') },
      { test: /\.json/, loader: 'json-loader' },
      { test: require.resolve('react'), loader: 'expose?React' },
      { test: /(\.svg|\.png)$/, loader: 'file'}
    ]
  },
  plugins: [
    env,
    new ExtractTextPlugin('[name].css', {
      allChunks: true
    }),
    new ServiceWorkerPlugin({
      entry: './src/sw',
      output: 'sw.js'
    }),
    new webpack.optimize.UglifyJsPlugin()
  ],
  resolve: {
    modulesDirectories: ['web_modules', 'node_modules', 'src']
  },
  postcss: [
    autoprefixer({
      browsers: ['last 2 version']
    }),
    simpleVars({
      variables: Colors
    })
  ],
  devtool: 'sourcemap'
};