webpack-dev-server.watchContentBase doesn't watch all files inside content base

Question

I would appreciate if someone could explain to me why webpack-dev-server doesn't reload browser page on home.html code change, yet reload gets triggered on home.js or index.html code change.

Simplified version of project structure -

/app
  -app.js
  -index.html
  /core
    -home.html
    -home.js (imported in app.js)
  /dist
    -app.bundle.js

webpack.config.js

const path = require('path');

module.exports = {
    entry: './app/app.js',
    output: {
        path: path.resolve(__dirname, './app/dist'),
        filename: 'app.bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, './app'),
        publicPath: '/dist/',
        watchContentBase: true
    }
}

I'm using [email protected] and [email protected]

Answer 1

You was pretty close, just add to contentBase every folder that contains .html files:

devServer: {
  contentBase: [
    path.join(__dirname, 'app'),
    path.join(__dirname, 'app/core'),
    // and so on...
  ],
}