Build better production bundles (GordyD#51)

Added/configured:
* production build of React
* strip non-english locales for moment.js
* uglify
* gzip

The result is:
* bundle.js went from 2.3MB to 163kB gzip'ed
* style.css went from 36KB to to 5.3kB gzip'ed

package.json

@@ -28,6 +28,7 @@
     "bluebird": "3.1.x",
     "body-parser": "1.14.x",
     "classnames": "2.2.x",
+    "compression": "^1.6.2",
     "config": "1.19.x",
     "ejs": "2.3.x",
     "express": "4.13.x",

server.js

@@ -1,6 +1,7 @@
 import path from 'path';
 import bodyParser from 'body-parser';
 import express from 'express';
+import compress from 'compression';
 import http from 'http';
 import socketIO from 'socket.io';
 import config from 'config';
@@ -21,6 +22,7 @@ app.set('view engine', 'ejs');
 /**
  * Server middleware
  */
+app.use(compress());
 app.use(require('serve-static')(path.join(__dirname, config.get('buildDirectory'))));
 app.use(bodyParser.urlencoded({
   extended: true

webpack.config.js

@@ -5,52 +5,25 @@ var nib = require('nib');
 
 var config = require('config');
 
-var isDev = (process.env.NODE_ENV === 'development');
-var appEntry = './client/app';
+var entry, output, plugins, loaders;
 
-var defineEnvPlugin = new webpack.DefinePlugin({
-  __DEV__: isDev
-});
-
-var entryScripts = [ appEntry ];
-var output = {
-  path: path.join(__dirname, [ '/', config.get('buildDirectory') ].join('')),
-  filename: 'bundle.js'
-};
-
-var plugins = [
-  defineEnvPlugin,
-  new ExtractTextPlugin('style.css'),
-  new webpack.NoErrorsPlugin()
-];
-
-var moduleLoaders = [
-  {
-    test: /\.js$/,
-    loaders: [ 'babel' ],
-    exclude: /node_modules/,
-    include: __dirname
-  }, {
-    test: /\.css?$/,
-    loaders: [ ExtractTextPlugin.extract('style-loader', 'css-loader'), 'raw' ],
-    include: __dirname
-  }, {
-    test: /\.styl?$/,
-    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader'),
-    include: __dirname
-  }
-];
-
-if (isDev) {
-  output.publicPath = 'http://localhost:3001/';
-  plugins.push(new webpack.HotModuleReplacementPlugin());
-  entryScripts = [
+if (process.env.NODE_ENV === 'development') {
+  entry = [
     'webpack-dev-server/client?http://localhost:3001',
     'webpack/hot/only-dev-server',
-    appEntry
-  ];
-
-  moduleLoaders = [
+    './client/app'
+  ]
+  output = {
+    path: path.join(__dirname, [ '/', config.get('buildDirectory') ].join('')),
+    filename: 'bundle.js',
+    publicPath: 'http://localhost:3001/'
+  }
+  plugins = [
+    new webpack.DefinePlugin({ __DEV__: true }),
+    new webpack.NoErrorsPlugin(),
+    new webpack.HotModuleReplacementPlugin()
+  ]
+  loaders = [
     {
       test: /\.js$/,
       loaders: [ 'react-hot', 'babel' ],
@@ -65,16 +38,45 @@ if (isDev) {
       loaders: [ 'style-loader', 'css-loader', 'stylus-loader' ],
       include: __dirname
     }
-  ];
+  ]
+} else {
+  entry = './client/app'
+  output = {
+    path: path.join(__dirname, [ '/', config.get('buildDirectory') ].join('')),
+    filename: 'bundle.js'
+  }
+  plugins = [
+    new webpack.DefinePlugin({ __DEV__: false, 'process.env.NODE_ENV': '"production"' }),
+    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
+    new webpack.optimize.UglifyJsPlugin(),
+    new ExtractTextPlugin('style.css'),
+    new webpack.NoErrorsPlugin()
+  ]
+  loaders = [
+    {
+      test: /\.js$/,
+      loaders: [ 'babel' ],
+      exclude: /node_modules/,
+      include: __dirname
+    }, {
+      test: /\.css?$/,
+      loaders: [ ExtractTextPlugin.extract('style-loader', 'css-loader'), 'css-loader' ],
+      include: __dirname
+    }, {
+      test: /\.styl?$/,
+      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader'),
+      include: __dirname
+    }
+  ]
 }
 
 module.exports = {
-  devtool: 'eval',
-  entry: entryScripts,
+  devtool: 'source-map',
+  entry: entry,
   output: output,
   plugins: plugins,
   module: {
-    loaders: moduleLoaders
+    loaders: loaders
   },
   stylus: {
     use: [ nib() ]