Use hmr in webpack dev server

Author: Kyle Lamse

config/webpack.dev.config.ts

@@ -8,6 +8,7 @@ import paths from './paths';
 
 const config: Configuration = {
     entry: {
+        client: 'webpack-hot-middleware/client',
         app: paths.entry,
         vendor : ['react', 'react-dom'],
         polyfills: ['es6-promise/auto', 'whatwg-fetch']
@@ -43,9 +44,10 @@ const config: Configuration = {
             // Extract css files into one giant file
             {
                 test: /\.css$/,
-                use: ExtractTextPlugin.extract({
-                    use: 'css-loader'
-                })
+                use: [
+                    'style-loader',
+                    'css-loader'
+                ]
             }
         ]
     },
@@ -60,7 +62,8 @@ const config: Configuration = {
             filename: 'index.html',
             template: path.join(paths.template, 'index.ejs'),
             PUBLIC_PATH: paths.staticPath
-        })
+        }),
+        new webpack.HotModuleReplacementPlugin()
     ]
 };
 

package.json

@@ -20,6 +20,7 @@
     "@types/node": "^8.0.8",
     "@types/webpack": "^3.0.1",
     "@types/webpack-dev-middleware": "^1.9.1",
+    "@types/webpack-hot-middleware": "^2.15.0",
     "awesome-typescript-loader": "^3.2.1",
     "css-loader": "^0.28.4",
     "enzyme": "^2.9.1",
@@ -29,13 +30,15 @@
     "nodemon": "^1.11.0",
     "react-test-renderer": "^15.6.1",
     "source-map-loader": "^0.2.1",
+    "style-loader": "^0.18.2",
     "ts-jest": "^20.0.6",
     "ts-node": "^3.1.0",
     "tslint": "^5.5.0",
     "tslint-eslint-rules": "^4.1.1",
     "typescript": "^2.4.1",
     "webpack": "^3.0.0",
-    "webpack-dev-middleware": "^1.11.0"
+    "webpack-dev-middleware": "^1.11.0",
+    "webpack-hot-middleware": "^2.18.2"
   },
   "dependencies": {
     "@types/express": "^4.0.36",

scripts/dev-server.ts

@@ -1,6 +1,7 @@
 import * as express from 'express';
 import * as webpackDevMiddleware from 'webpack-dev-middleware';
-import * as compiler from 'webpack';
+import * as webpackHotMiddleware from 'webpack-hot-middleware';
+import * as webpack from 'webpack';
 
 import webpackConfig from '../config/webpack.dev.config';
 import webpackDevServerConfig from '../config/webpack.server.config';
@@ -11,7 +12,11 @@ const app = express();
 // have express serve static files
 app.use(paths.staticPath, express.static(paths.public));
 
+const compiler = webpack(webpackConfig);
+
 // allow webpack to inject output to server
-app.use(webpackDevMiddleware(compiler(webpackConfig), webpackDevServerConfig));
+app.use(webpackDevMiddleware(compiler, webpackDevServerConfig));
+
+app.use(webpackHotMiddleware(compiler));
 
 app.listen(8080);

yarn.lock

@@ -142,6 +142,13 @@
     "@types/connect" "*"
     "@types/webpack" "*"
 
+"@types/webpack-hot-middleware@^2.15.0":
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-hot-middleware/-/webpack-hot-middleware-2.15.0.tgz#15c93c44ff2b6369d898df7ef42a374e8ba6780e"
+  dependencies:
+    "@types/connect" "*"
+    "@types/webpack" "*"
+
 "@types/webpack@*", "@types/webpack@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-3.0.1.tgz#c8c5d085ceb709d3b7391ce95f659a9b3f498205"
@@ -225,6 +232,10 @@ ansi-escapes@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
 
+ansi-html@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+
 ansi-regex@^2.0.0, ansi-regex@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -2183,6 +2194,10 @@ html-encoding-sniffer@^1.0.1:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-entities@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+
 html-minifier@^3.2.3:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.2.tgz#d73bc3ff448942408818ce609bf3fb0ea7ef4eb7"
@@ -4197,7 +4212,7 @@ querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
 
-querystring@0.2.0:
+querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
@@ -4852,6 +4867,13 @@ strip-json-comments@^2.0.0, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
+style-loader@^0.18.2:
+  version "0.18.2"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -5323,6 +5345,15 @@ webpack-dev-middleware@^1.11.0:
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
 
+webpack-hot-middleware@^2.18.2:
+  version "2.18.2"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.18.2.tgz#84dee643f037c3d59c9de142548430371aa8d3b2"
+  dependencies:
+    ansi-html "0.0.7"
+    html-entities "^1.2.0"
+    querystring "^0.2.0"
+    strip-ansi "^3.0.0"
+
 webpack-sources@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"