From ff462580b031940b11e374dd7654829834ee90c8 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 3 Nov 2016 14:58:30 +0000
Subject: [PATCH] Use webpack-dev-server instead of http-server

Advantages:
 * blocks while a rebuild is in progress so you're less likely to reload the
   old version

 * serves from memory rather than disk, so we no longer need to turn off the
   cachebuster to avoid filling the disk with bundles. Empirically, seems to
   last a plausible amount of time without OOMing; there's no real reason to
   believe it would use any more memory than webpack itself.

 * That in turn means we no longer need the hack to stop chrome caching old
   sourcemaps (because the sourcemap now has a cachebuster in its name).

 * one fewer process for parallelshell to (fail to) manage.

 * in future, we could consider the fancy hot-reload functionality.
---
 package.json      | 13 ++++++-------
 webpack.config.js | 21 +++++++++------------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index e9b91432..1c8fd007 100644
--- a/package.json
+++ b/package.json
@@ -35,12 +35,11 @@
     "build:dev": "npm run build:emojione && npm run build:css && npm run build:bundle:dev",
     "dist": "scripts/package.sh",
     "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w",
-    "start:js": "webpack -w --progress --no-cache-buster",
-    "start:js:prod": "NODE_ENV=production webpack -w --progress --no-cache-buster",
+    "start:js": "webpack-dev-server -w --progress",
+    "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
     "start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
-    "//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
-    "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
+    "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\"",
+    "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"",
     "clean": "rimraf build lib vector/olm.* vector/bundle.* vector/emojione vector/index.html",
     "prepublish": "npm run build:compile",
     "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
@@ -95,7 +94,6 @@
     "expect": "^1.16.0",
     "fs-extra": "^0.30.0",
     "html-webpack-plugin": "^2.24.0",
-    "http-server": "^0.8.4",
     "json-loader": "^0.5.3",
     "karma": "^0.13.22",
     "karma-chrome-launcher": "^0.2.3",
@@ -113,7 +111,8 @@
     "react-addons-test-utils": "^15.0.1",
     "rimraf": "^2.4.3",
     "source-map-loader": "^0.1.5",
-    "webpack": "^1.12.14"
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.16.2"
   },
   "optionalDependencies": {
     "olm": "https://matrix.org/packages/npm/olm/olm-2.0.0.tgz"
diff --git a/webpack.config.js b/webpack.config.js
index e1336f40..7d5ba474 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,15 +3,6 @@ var webpack = require('webpack');
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 
-var cachebuster = true;
-
-for (var i=0; i < process.argv.length; i++) {
-    var arg = process.argv[i];
-    if (arg == "--no-cache-buster") {
-        cachebuster = false;
-    }
-}
-
 module.exports = {
     entry: {
         "bundle": "./src/vector/index.js",
@@ -49,7 +40,7 @@ module.exports = {
     },
     output: {
         path: path.join(__dirname, "vector"),
-        filename: "[name]" + (cachebuster ? ".[chunkhash]" : "") + ".js",
+        filename: "[name].[chunkhash].js",
         devtoolModuleFilenameTemplate: function(info) {
             // Reading input source maps gives only relative paths here for
             // everything. Until I figure out how to fix this, this is a
@@ -84,7 +75,7 @@ module.exports = {
         }),
 
         new ExtractTextPlugin(
-            "[name]" + (cachebuster ? ".[contenthash]" : "") + ".css",
+            "[name].[contenthash].css",
             {
                 allChunks: true
             }
@@ -100,7 +91,13 @@ module.exports = {
             inject: false,
         }),
     ],
-    devtool: 'source-map'
+    devtool: 'source-map',
+
+    // configuration for the webpack-dev-server
+    devServer: {
+        // serve unwebpacked assets from vector.
+        contentBase: './vector',
+    },
 };
 
 // olm is an optional dependency. Ignore it if it's not installed, to avoid a