Getting `webPackDevMiddleware` to auto refresh my browser

I'm trying to use webpackDevMiddleware in an express app to reload the browser page whenever a change happens. Currently, webpack seems to compile and bundle, but doesn't reload the page. I have had to manually refresh the page to see the changes.

Here's what I have as of now:

package.json

{
  ...
  "scripts": {
    ...
    "start": "node ./server.js",
    ...
  },
  ...
  "dependencies": {...},
  "devDependencies": {
    ...
    "webpack": "^2.2.1",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-dev-server": "^2.4.1"
  }
}

server.js

const express = require('express');
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackConfig = require("./webpack.config");

const app = express();

process.env.PORT = process.env.PORT || 5000;


if(process.env.NODE_ENV !== 'production') {
    const compiler = webpack(webpackConfig);
    const middleware = webpackDevMiddleware(compiler, {
      publicPath: webpackConfig.output.publicPath
    });

   app.use(middleware);
}

app.use(express.static(__dirname + '/client'));

app.listen(process.env.PORT, function(){
  console.log(`Running on port ${process.env.PORT}`);
});

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const ROOT_DIR = path.dirname(require.main.filename)
const APP_DIR = path.resolve(ROOT_DIR, 'client');
const DIST_DIR = path.resolve(ROOT_DIR, 'dist');


module.exports = {
    context: APP_DIR,
    entry: './app.js',
    output: {
        publicPath: '/',
        path: DIST_DIR,
        filename: 'bundle.js'
    },
    devtool : 'inline-source-map',
    module: {
        rules: [
            { test: /\.html$/, loader: 'html-loader' },
            { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: ['ng-annotate-loader', 'babel-loader'] },
             { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: ROOT_DIR + '/index.html'
        })
    ]
}

I've tried adding watchOptions to the middleware config but that doesn't seem to have any effect.

Any idea as to why this doesn't work?

via krishgopinath