Use Webpack Dev Server

package.json

@@ -5,9 +5,11 @@
   "main": "dist/bundle.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "webpack": "webpack -w",
     "run": "python -m SimpleHTTPServer 8080",
-    "lint": "node_modules/.bin/tslint"
+    "lint": "node_modules/.bin/tslint",
+    "watch": "webpack --progress --watch",
+    "start": "webpack-dev-server --open",
+    "build": "webpack"
   },
   "author": "",
   "license": "ISC",
@@ -32,6 +34,7 @@
     "tslint": "^5.5.0",
     "typescript": "^2.1.4",
     "url-loader": "^0.5.9",
-    "webpack": "~2.2.1"
+    "webpack": "~2.2.1",
+    "webpack-dev-server": "^2.7.1"
   }
 }

webpack.config.js

@@ -1,13 +1,24 @@
+const path = require('path');
+
+const basePath = __dirname;
+const distPath = path.join(basePath, "dist");
+
 module.exports = {
     entry: "./src/index.tsx",
     output: {
         filename: "bundle.js",
-        path: __dirname + "/dist"
+        path: distPath,
     },
 
     // Enable sourcemaps for debugging webpack's output.
     // devtool: "source-map",
 
+    devServer: {
+        contentBase: basePath,
+        compress: true,
+        port: 8080,
+    },
+
     resolve: {
         // Add '.ts' and '.tsx' as resolvable extensions.
         extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
@@ -40,7 +51,7 @@ module.exports = {
 
         // preLoaders: [
         //     // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-        //     // { test: /\.js$/, loader: "source-map-loader" }
+        //     { test: /\.js$/, loader: "source-map-loader" }
         // ]
     },