Webpack Dev Server include additional files for watching

Question

I am working on a server side renderer for Vue and I am using the webpack dev server as a development server. It already works quite well, I have setup the server so that it triggers a build when one of the source files get changed. Of course it does that out of the box because my source files are part of the entry in the webpack config.

Now with Vue you can also point to a html file that serves as a template for server side rendering. It is fairly simple to pass that html file to Vue for doing server side rendering.

Now what I want to do is update the Vue server side renderer every time the html file changes. So basically all I need to to is tell webpack or the webpack dev server respectively to also watch for file changes on that html file.

How can I do that?

For context, this is the gist of my webpack config:

module.exports = {
  entry: {
    client: 'src/path/to/client.js',
  },
  output: {
    path: appDist,
    publicPath: '/',
    filename: '[name].[chunkhash].js',
  },
  resolve: {
    extensions: ['.vue', '.js', '.json', '.mjs'],
  },
  module: {
    rules: [/* ...*/],
  },
  /* some other options here */
  devServer: {
    contentBase: [appDist, appPublic],
    publicPath: '/',
    port: 8080,
    compress: false,
    overlay: true,
    quiet: true,
  }
};

Now I also want to tell webpack to also trigger a rebuild when

'public/index.html'

changes.

Note that I am calling webpack and the dev server manually like so

const compiler = webpack([config.client, config.server]);
const devServer = new WebpackDevServer(compiler, config.devServer);

So I also have all the options that I have with JavaScript it it's not possible to do this via configuration