How to get browser reload when editing html/jade files in webpack?

[relio]

I have clone this repository and everything works apart from the fact that when I edit my jade file, the browser doesn’t refresh.

Here are few snippets of of my code. First from webpack.config.js

const PATHS = {
  app: path.join(__dirname, 'app'),
  jsComp: path.join(__dirname, 'app', 'react-components'),
  template: path.join(__dirname, 'app','index.jade'),
  style: [
    path.join(__dirname, 'app', 'styles/main.scss')
  ],
  build: path.join(__dirname, 'build')
};

const common = {
  entry: {
    style: PATHS.style,
    app: PATHS.jsComp
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },
  module: {
    loaders: [
      { test: /\.jade$/, loader: "jade" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
      template: PATHS.template, // Load a custom template (ejs by default but can be changed) 
    inject: 'body' // Inject all scripts into the body (this is the default so you can skip it) 
    })
  ]
};

Then I also have this module lib/parts.js

exports.devServer = function(options) {
  return {
    devServer: {.
      historyApiFallback: true,
      hot: true,
      inline: true,
      stats: 'errors-only',
      host: options.host, // Defaults to `localhost`
      port: options.port // Defaults to 8080
    },      
    plugins: [
      new webpack.HotModuleReplacementPlugin({
        multiStep: true
      })
    ]
  };
}

According to my research the reason why reloading for html/jade does not work is that I might need to add an entry point to the webpack configuration: webpack/hot/dev-server. So I did modify the top code to this

const common = {
  entry: {
    style: PATHS.style,
    app: [ 
      'webpack-dev-server/client?http://0.0.0.0:4005',
      'webpack/hot/only-dev-server',
      PATHS.jsComp
    ]
  },

(the port number is correct as I changed it)

The reloading still doesn’t work.

Is there a way to fix this? Could it be that I need to update anything in my system.