Creating sepearate dev and prod webpack builds. Enabled webpack watch mode. Updated to latest master webpack to fix bug in watch mode

Makefile

@@ -218,16 +218,16 @@ nuke: | clean clean-docker
 
 	touch $@
 
-run: | start-docker run-client run-server
+run: | start-docker run-server run-client
 
 run-server: .prepare-go
 	@echo Starting go web server
+	mkdir -p webapp/dist/files
 	$(GO) run $(GOFLAGS) mattermost.go -config=config.json &
 
 run-client:
 	@echo Starting client
 
-	mkdir -p webapp/dist/files
 	cd webapp && make run
 
 	@if [ "$(BUILD_ENTERPRISE)" = "true" ] && [ -d "$(ENTERPRISE_DIR)" ]; then \
@@ -240,7 +240,7 @@ run-client:
 		sed -i'.bak' 's|_BUILD_ENTERPRISE_READY_|false|g' ./model/version.go; \
 	fi
 
-stop: stop-server
+stop: stop-server stop-client
 	@if [ $(shell docker ps -a | grep -ci ${DOCKER_CONTAINER_NAME}) -eq 1 ]; then \
 		echo removing dev docker container; \
 		docker stop ${DOCKER_CONTAINER_NAME} > /dev/null; \
@@ -264,6 +264,9 @@ stop-server:
 		kill $$PID; \
 	done
 
+stop-client:
+	cd webapp && make stop
+
 restart-server: stop-server run-server
 
 setup-mac:

webapp/Makefile

@@ -1,4 +1,4 @@
-.PHONY: build test run clean
+.PHONY: build test run clean stop
 
 test:
 	@echo Checking for style guide compliance
@@ -20,8 +20,15 @@ build: | .npminstall test
 run: .npminstall
 	@echo Running mattermost Webapp for development
 
-	npm run run
-	
+	npm run run &
+
+stop:
+	@echo Stopping changes watching
+
+	@for PROCID in $$(ps -ef | grep "[n]ode.*[w]ebpack" | awk '{ print $$2 }'); do \
+		echo stopping webpack watch $$PROCID; \
+		kill $$PROCID; \
+	done
 
 clean:
 	@echo Cleaning Webapp

webapp/package.json

@@ -34,26 +34,26 @@
     "babel-preset-es2015-webpack": "6.4.0",
     "babel-preset-react": "6.5.0",
     "babel-preset-stage-0": "6.5.0",
+    "copy-webpack-plugin": "1.1.1",
+    "css-loader": "0.23.1",
     "eslint": "2.2.0",
     "eslint-plugin-react": "4.0.0",
     "exports-loader": "0.6.3",
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.8.5",
-    "url-loader": "0.5.7",
     "html-loader": "0.4.3",
-    "copy-webpack-plugin": "1.1.1",
-    "css-loader": "0.23.1",
     "imports-loader": "0.6.5",
-    "raw-loader": "0.5.1",
     "json-loader": "0.5.4",
     "node-sass": "3.4.2",
+    "raw-loader": "0.5.1",
     "sass-loader": "3.2.0",
     "style-loader": "0.13.0",
-    "webpack": "2.1.0-beta.4"
+    "url-loader": "0.5.7",
+    "webpack": "webpack/webpack#master"
   },
   "scripts": {
       "check": "eslint --ext \".jsx\" --ignore-pattern node_modules --quiet .",
-      "build": "webpack --optimize-dedupe",
-      "run": "webpack --progress"
+      "build": "webpack",
+      "run": "webpack --progress --watch"
   }
 }

webapp/webpack.config.js

@@ -5,14 +5,20 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const htmlExtract = new ExtractTextPlugin('html', 'root.html');
 
-module.exports = {
+const NPM_TARGET = process.env.npm_lifecycle_event; //eslint-disable-line no-process-env
+
+var DEV = false;
+if (NPM_TARGET === 'run') {
+    DEV = true;
+}
+
+var config = {
     entry: ['babel-polyfill', './root.jsx', 'root.html'],
     output: {
         path: 'dist',
         publicPath: '/static/',
         filename: 'bundle.js'
     },
-    devtool: 'source-map',
     module: {
         loaders: [
             {
@@ -22,7 +28,7 @@ module.exports = {
                 query: {
                     presets: ['react', 'es2015-webpack', 'stage-0'],
                     plugins: ['transform-runtime'],
-                    cacheDirectory: true
+                    cacheDirectory: DEV
                 }
             },
             {
@@ -69,19 +75,8 @@ module.exports = {
         new CopyWebpackPlugin([
             {from: 'images/emoji', to: 'emoji'}
         ]),
-        new webpack.optimize.UglifyJsPlugin({
-            'screw-ie8': true,
-            mangle: {
-                toplevel: false
-            },
-            compress: {
-                warnings: false
-            },
-            comments: false
-        }),
-        new webpack.optimize.AggressiveMergingPlugin(),
         new webpack.LoaderOptionsPlugin({
-            minimize: true,
+            minimize: !DEV,
             debug: false
         })
     ],
@@ -96,3 +91,36 @@ module.exports = {
         ]
     }
 };
+
+// Development mode configuration
+if (DEV) {
+    config.devtool = 'eval-cheap-module-source-map';
+}
+
+// Production mode configuration
+if (!DEV) {
+    config.devtool = 'source-map';
+    config.plugins.push(
+        new webpack.optimize.UglifyJsPlugin({
+            'screw-ie8': true,
+            mangle: {
+                toplevel: false
+            },
+            compress: {
+                warnings: false
+            },
+            comments: false
+        })
+    );
+    config.plugins.push(
+        new webpack.optimize.AggressiveMergingPlugin()
+    );
+    config.plugins.push(
+        new webpack.optimize.OccurrenceOrderPlugin(true)
+    );
+    config.plugins.push(
+        new webpack.optimize.DedupePlugin()
+    );
+}
+
+module.exports = config;