Enhance prod minification (#38)

* Enhance prod minification 

Added postcss-csso for css/scss minification
Added DEV_SERVER_HOST_URL directly in .env (dev server under subdomain support)

* Update prod webpack

* Fix dist public path

Author: xD3VHAX

.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
+

README.md

@@ -30,6 +30,11 @@ For production builds:
 npm run prod:build
 npm run serve
 ```
+Or simply
+
+```
+npm run prod
+```
 
 For Heroku, simply add a `Procfile`:
 ```

package-lock.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",
@@ -70,7 +71,7 @@
       }
     },
     "prod:build:server": {
-      "command": "$(npm bin)/webpack --config webpack/ssr.babel.js --progress && $(npm bin)/babel ./server -d ./dist",
+      "command": "$(npm bin)/webpack --config webpack/ssr.babel.js --progress && $(npm bin)/babel ./server -d ./dist && $(rm ./server/renderer/handleRender.built.js)",
       "env": {
         "NODE_ENV": "production"
       }
@@ -116,24 +117,24 @@
     "babel-eslint": "^8.0.3",
     "better-npm-run": "^0.1.0",
     "debug": "^3.1.0",
-    "eslint": "^4.12.1",
+    "eslint": "^4.13.0",
     "eslint-loader": "^1.9.0",
     "eslint-plugin-react": "^7.5.1",
     "nodemon": "^1.12.5",
     "react-transform-catch-errors": "^1.0.2",
     "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 +172,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",
@@ -183,11 +185,11 @@
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",
-    "resolve-url-loader": "^2.2.0",
+    "resolve-url-loader": "^2.2.1",
     "sass-loader": "^6.0.6",
     "sass-resources-loader": "^1.3.1",
     "semantic-ui-css": "^2.2.12",
-    "semantic-ui-react": "^0.77.0",
+    "semantic-ui-react": "^0.77.1",
     "serve-static": "^1.13.1",
     "style-loader": "^0.19.0",
     "url-loader": "^0.6.2",

package.json

@@ -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
+};

postcss.config.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, '../' + process.env.WEBPACK_OUTPUT_PATH)),
   express.static(path.join(__dirname, '../common/images')),
   express.static(path.join(__dirname, '../common/fonts'))
 );

server/server.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/base.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/constants.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/development.hot.js

@@ -1,19 +1,27 @@
 import webpack from 'webpack';
 import baseConfig from './base';
 import CompressionPlugin from 'compression-webpack-plugin';
-
+import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
 const plugins = [
+  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({