Optimize production build in webpack

README.md

@@ -33,7 +33,7 @@ Run `npm start`. This single command does 3 things:
 Effectively, whenever you make any changes in Reason sources, they get automatically compiled to JS. Then `webpack` picks the new files and bundles into a single file `main.js` inside `/bundledOutputs` dir. This file is ready to be used in the browser (see `/index.html`).
 
 ## Production build
-Run `npm run build`. For faster and smaller bundle try running `NODE_ENV=production npm run build`
+Run `npm run build`. For faster and smaller bundle try running `npm run prod`.
 
 # Demo
 [https://mmiszy.github.io/reason-react-simple-starter/](https://mmiszy.github.io/reason-react-simple-starter/)

bsconfig.json

@@ -2,7 +2,7 @@
 // BuckleScript comes with its own parser for bsconfig.json, which is normal JSON, with the extra support of comments and trailing commas.
 {
   "name": "reason-react-simple-starter",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "reason": {
     "react-jsx": 2
   },

hooks/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 
-NODE_ENV=production npm run build
+npm run prod
 git add lib bundledOutputs

package.json

@@ -1,10 +1,11 @@
 {
   "name": "reason-react-simple-starter",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "scripts": {
     "build": "npm run clean && npm-run-all build:*",
     "build:bsb": "bsb -make-world",
     "build:webpack": "webpack -p",
+    "prod": "npm run clean && npm run build:bsb && NODE_ENV=production npm run build:webpack -- --env=prod",
     "clean": "npm-run-all --parallel clean:*",
     "clean:bsb": "bsb -clean-world",
     "clean:project": "rm -rf bundledOutputs .merlin",
@@ -30,7 +31,8 @@
     "shared-git-hooks": "1.2.1",
     "webpack": "3.4.1",
     "webpack-common-shake": "1.5.3",
-    "webpack-dev-server": "2.6.1"
+    "webpack-dev-server": "2.6.1",
+    "webpack-merge": "4.1.0"
   },
   "dependencies": {
     "bs-fetch": "0.1.1",

webpack.config.js

@@ -1,39 +1,3 @@
-const path = require('path');
-const webpack = require('webpack');
-const ShakePlugin = require('webpack-common-shake').Plugin;
-
-module.exports = {
-  entry: [
-    'react-hot-loader/patch',
-    'webpack-dev-server/client?http://localhost:8081',
-    'webpack/hot/only-dev-server',
-    './lib/es6/src/main.js',
-  ],
-  output: {
-    path: path.join(__dirname, "bundledOutputs"),
-    filename: '[name].js',
-    publicPath: './'
-  },
-  devtool: 'inline-source-map',
-  devServer: {
-    hot: true,
-    port: 8081,
-    contentBase: './',
-    publicPath: '/bundledOutputs/',
-    watchOptions: {
-      ignored: [
-        /node_modules/,
-        /bundledOutputs/
-      ]
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-      },
-    }),
-    // new ShakePlugin(), // https://github.com/indutny/webpack-common-shake/issues/16
-    new webpack.HotModuleReplacementPlugin()
-  ]
-};
+module.exports = function(env = 'dev') {
+  return require(`./webpack/webpack.${env}.js`)
+};

webpack/webpack.common.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+    output: {
+        path: path.join(__dirname, '..', "bundledOutputs"),
+        filename: '[name].js',
+        publicPath: './'
+    },
+};

webpack/webpack.dev.js

@@ -0,0 +1,29 @@
+const webpack = require('webpack');
+
+const Merge = require('webpack-merge');
+const CommonConfig = require('./webpack.common.js');
+
+module.exports = Merge(CommonConfig, {
+    entry: [
+        'react-hot-loader/patch',
+        'webpack-dev-server/client?http://localhost:8081',
+        'webpack/hot/only-dev-server',
+        './lib/es6/src/main.js',
+    ],
+    devtool: 'inline-source-map',
+    devServer: {
+        hot: true,
+        port: 8081,
+        contentBase: './',
+        publicPath: '/bundledOutputs/',
+        watchOptions: {
+            ignored: [
+                /node_modules/,
+                /bundledOutputs/
+            ]
+        }
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin()
+    ]
+});

webpack/webpack.prod.js

@@ -0,0 +1,37 @@
+const ShakePlugin = require('webpack-common-shake').Plugin;
+const webpack = require('webpack');
+
+const Merge = require('webpack-merge');
+const CommonConfig = require('./webpack.common.js');
+
+module.exports = Merge(CommonConfig, {
+    entry: [
+        './lib/es6/src/main.js',
+    ],
+    devtool: false,
+    plugins: [
+        new webpack.LoaderOptionsPlugin({
+            minimize: true,
+            debug: false
+        }),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'NODE_ENV': JSON.stringify('production')
+            }
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            beautify: false,
+            mangle: {
+                screw_ie8: true,
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false,
+                screw_ie8: true
+            },
+            comments: false,
+            sourceMap: false
+        }),
+        new ShakePlugin(), // https://github.com/indutny/webpack-common-shake/issues/16
+    ]
+})