Optimize build process

package.json

@@ -4,8 +4,9 @@
   "author": "uwap <me+spacemap.package.json@uwap.name>",
   "description": "control devices via mqtt on a beautiful map of your space",
   "scripts": {
-    "build": "webpack --bail",
-    "watch": "webpack --watch"
+    "build": "webpack --bail --config webpack.dev.js",
+    "production-build": "webpack --bail --config webpack.prod.js",
+    "watch": "webpack-dev-server --open --config webpack.dev.js"
   },
   "dependencies": {
     "babel-preset-env": "^1.6.0",
@@ -26,6 +27,7 @@
     "babel-core": "^6.25.0",
     "babel-loader": "^7.1.1",
     "babel-preset-react": "^6.24.1",
+    "clean-webpack-plugin": "^0.1.17",
     "css-loader": "^0.28.7",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.5",
@@ -35,6 +37,8 @@
     "html-webpack-plugin": "^2.30.1",
     "style-loader": "^0.19.0",
     "webpack": "^3.1.0",
+    "webpack-dev-server": "^2.9.4",
+    "webpack-merge": "^4.1.1",
     "webpack-shell-plugin": "^0.5.0"
   },
   "license": "MIT"

webpack.common.js

@@ -1,20 +1,14 @@
-// webpack.config.js:
-
 const path = require('path');
 const webpack = require('webpack');
 const WebpackShellPlugin = require('webpack-shell-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 const preBuildScripts = process.env.NO_FLOW == undefined ?
   process.env.FLOW_PATH != undefined ? [process.env.FLOW_PATH] : ['flow']
   : [];
 
-const extractTextCSSLoader = ExtractTextPlugin.extract({
-          fallback: "style-loader",
-          use: "css-loader"
-        });
-
 module.exports = {
   resolve: {
     extensions: ['.js', '.jsx']
@@ -24,23 +18,20 @@ module.exports = {
   ],
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'main.js',
-    publicPath: './'
+    filename: 'main.js'
   },
   module: {
     loaders: [
-      { test: /\.(woff2?|eot|ttf|svg)$/, loader: "file-loader" },
-      { test: /\.css$/, use: extractTextCSSLoader },
-      { test: /\.js(x)?$/, exclude: /node_modules/, loader: "babel-loader" }
+      { test: /\.(woff2?|eot|ttf|svg)$/, loader: "file-loader" }
     ]
   },
   plugins: [
-    new WebpackShellPlugin({onBuildStart:preBuildScripts}),
+    new CleanWebpackPlugin(["dist"]),
+    // new WebpackShellPlugin({onBuildStart:preBuildScripts}),
     new HtmlWebpackPlugin({
       title: 'Space Map',
       template: 'index.ejs'
     }),
     new ExtractTextPlugin("styles.css")
-  ],
-  devtool: 'source-map'
+  ]
 };

webpack.dev.js

@@ -0,0 +1,23 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+const extractCSS = ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: {
+            loader: "css-loader"
+          }
+        });
+
+module.exports = merge(common, {
+  module: {
+    loaders: [
+      { test: /\.css$/, use: extractCSS },
+      { test: /\.js(x)?$/, exclude: /node_modules/, loader: "babel-loader?cacheDirectory=true" }
+    ]
+  },
+  devtool: "eval-cheap-module-source-map",
+  devServer: {
+    contentBase: './dist'
+  },
+});

webpack.prod.js

@@ -0,0 +1,33 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+const extractCSS = ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: {
+            loader: "css-loader",
+            options: {
+              sourceMap: true,
+              minimize: true
+            }
+          }
+        });
+
+module.exports = merge(common, {
+  module: {
+    loaders: [
+      { test: /\.css$/, use: extractCSS },
+      { test: /\.js(x)?$/, exclude: /node_modules/, loader: "babel-loader" }
+    ]
+  },
+  devtool: "source-map",
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('production')
+      }
+    })
+  ]
+});