Create (optimizing) production build system

package.json

@@ -4,7 +4,8 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server --hot --inline & python3 zesje"
+    "start": "webpack-dev-server --hot --inline --config webpack.dev.js & python3 zesje",
+    "build": "webpack --config webpack.prod.js"
   },
   "dependencies": {
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -23,8 +24,10 @@
     "react-router-dom": "^4.2.2",
     "react-table": "^6.7.6",
     "style-loader": "^0.19.1",
+    "uglifyjs-webpack-plugin": "^1.1.6",
     "url-loader": "^0.6.2",
-    "webpack": "^3.10.0"
+    "webpack": "^3.10.0",
+    "webpack-merge": "^4.1.1"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",

webpack.config.js → webpack.common.js

@@ -27,27 +27,5 @@ module.exports = {
     ]
   },
 
-  plugins: [HtmlWebpackPluginConfig],
-
-  devServer: {
-    hot: true,
-    inline: true,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:5000'
-      }
-    },
-    historyApiFallback: true,
-    port: 8881,
-    publicPath: '/',
-    host: '0.0.0.0',
-    overlay: {
-      warnings: true,
-      errors: true
-    },
-    watchContentBase: true,
-    watchOptions: {
-      poll: true
-    }
-  }
+  plugins: [HtmlWebpackPluginConfig]
 }

webpack.dev.js

+const merge = require('webpack-merge');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    devtool: 'eval-source-map',
+
+    devServer: {
+        hot: true,
+        inline: true,
+        proxy: {
+            '/api': {
+                target: 'http://localhost:5000'
+            }
+        },
+        historyApiFallback: true,
+        port: 8881,
+        publicPath: '/',
+        host: '0.0.0.0',
+        overlay: {
+            warnings: true,
+            errors: true
+        },
+        watchContentBase: true,
+        watchOptions: {
+            poll: true
+        }
+    }
+})
\ No newline at end of file

webpack.prod.js

+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    devtool: 'source-map',
+    plugins: [
+        new UglifyJsPlugin({
+            parallel: true,
+            cache: true,
+            sourceMap: true
+          }),
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': JSON.stringify('production')
+        })
+   ]
+})
\ No newline at end of file