Enhance prod minification

.env.example

@@ -11,8 +11,10 @@ APPLICATION_BASE_URL=http://localhost:3000
 ASSET_HOST=/dist
 
 # The output path for webpack builds.
-WEBPACK_OUTPUT_PATH=/dist
+WEBPACK_OUTPUT_PATH=/dist/public
 
 # Settings for webpack-dev-server.
 DEV_SERVER_PORT=3001
 DEV_SERVER_HOSTNAME=localhost
+DEV_SERVER_HOST_URL=http://localhost:3001
+

package.json

@@ -14,6 +14,7 @@
   },
   "scripts": {
     "start": "better-npm-run dev:build && better-npm-run dev:start",
+    "prod": "better-npm-run prod:build && better-npm-run serve",
     "serve": "better-npm-run serve",
     "dev:start": "better-npm-run dev:start",
     "dev:start:server": "better-npm-run dev:start:server",
@@ -124,16 +125,19 @@
     "redbox-react": "^1.5.0",
     "supertest": "^3.0.0",
     "webpack-dev-server": "^2.9.6",
+    "webpack-dev-server": "^2.9.7",
     "webpack-sources": "^1.1.0"
   },
   "dependencies": {
     "app-module-path": "^2.2.0",
     "autoprefixer": "^7.2.1",
+    "autoprefixer": "^7.2.2",
     "axios": "^0.17.1",
     "babel": "^6.23.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.1",
+    "babel-loader": "^7.1.2",
     "babel-plugin-react-transform": "^3.0.0",
     "babel-plugin-resolver": "^1.1.0",
     "babel-plugin-syntax-class-properties": "^6.13.0",
@@ -171,6 +175,7 @@
     "lodash": "^4.17.4",
     "mocha": "^4.0.1",
     "node-sass": "^4.7.2",
+    "postcss-csso": "^3.0.0",
     "postcss-loader": "^2.0.9",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

postcss.config.js

@@ -1,5 +1,10 @@
 const autoprefixer = require('autoprefixer');
+const csso = require('postcss-csso')({restructure: true, comments: false});
 
+const pluginsList = [autoprefixer];
+if (process.env.NODE_ENV === 'production') {
+  pluginsList.push(csso);
+}
 module.exports = {
-  plugins: [autoprefixer]
-};
+  plugins: pluginsList
+}

server/server.js

@@ -33,7 +33,7 @@ app.use(compression());
 
 // Add middleware to serve up all static files
 app.use('/dist',
-  express.static(path.join(__dirname, '../dist')),
+  express.static(path.join(__dirname, '../dist/public')),
   express.static(path.join(__dirname, '../common/images')),
   express.static(path.join(__dirname, '../common/fonts'))
 );

webpack/base.js

@@ -121,9 +121,7 @@ export default {
         test: /\.css$/,
         use: extractText.extract({
           fallback: 'style-loader',
-          use: [
-            { loader: 'css-loader' }
-          ]
+          use: ['css-loader', 'postcss-loader'],
         })
       },
       {

webpack/constants.js

@@ -6,7 +6,7 @@ import { mapValues, keyBy } from 'lodash';
  */
 export const {
   NODE_ENV, DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, WEBPACK_OUTPUT_PATH,
-  ASSET_HOST, ASSET_PATH, ANALYZE, APPLICATION_BASE_URL
+  ASSET_HOST, ASSET_PATH, ANALYZE, APPLICATION_BASE_URL, DEV_SERVER_HOST_URL
 } = process.env;
 
 // The env vars to expose on the client side.
@@ -21,7 +21,6 @@ export const CLIENT_ENV_VARS = mapValues(
 );
 
 // The URL of the dev server including the hostname and port
-export const DEV_SERVER_HOST_URL = `http://${DEV_SERVER_HOSTNAME}:${DEV_SERVER_PORT}`;
 
 // The asset host to use for webpack files. In development, we will always use
 // the dev server's URL.

webpack/development.hot.js

@@ -63,7 +63,8 @@ new WebpackDevServer(webpack(config), {
     version: false,
     chunks: false,
     children: false
-  }
+  },
+  disableHostCheck: true
 }).listen(DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, function errorCallback(err) {
   if (err) {
     console.error(err);

webpack/production.babel.js

@@ -1,19 +1,39 @@
 import webpack from 'webpack';
 import baseConfig from './base';
 import CompressionPlugin from 'compression-webpack-plugin';
+import CleanWebpackPlugin from 'clean-webpack-plugin';
+import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
+let pathsToClean = [
+  'dist',
+];
 
+// the clean options to use
+let cleanOptions = {
+  root: '/var/www/react/',
+  verbose: true,
+  dry: false,
+};
 const plugins = [
+  new CleanWebpackPlugin(pathsToClean, cleanOptions),
+  new webpack.BannerPlugin({
+    banner: 'hash:[hash], chunkhash:[chunkhash], name:[name], filebase:[filebase], query:[query], file:[file]',
+  }),
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     filename: '[name].[hash].js',
     minChunks: module => /node_modules/.test(module.resource)
   }),
   new webpack.optimize.AggressiveMergingPlugin(),
   new webpack.optimize.ModuleConcatenationPlugin(),
-  new webpack.optimize.UglifyJsPlugin({
-    compress: {
-      screw_ie8: true,
-      warnings: false
+  new UglifyJSPlugin({
+    uglifyOptions: {
+      compress: {
+        warnings: false
+      },
+      mangle: true,
+      output: {
+        comments: false,
+      },
     }
   }),
   new CompressionPlugin({