Webpack Dev Server 包含用于观看的附加文件

Question

我正在开发服务器端渲染器，Vue并将其用作webpack dev server开发服务器。它已经工作得很好，我已经设置了服务器，以便在源文件之一发生更改时触发构建。当然，它是开箱即用的，因为我的源文件是配置entry中的一部分webpack。

现在，Vue您还可以指向html用作服务器端渲染模板的文件。将 html 文件传递​​给 Vue 进行服务器端渲染非常简单。

现在我想做的是Vue每次html文件更改时更新服务器端渲染器。所以基本上我需要做的就是告诉webpack或webpack dev server分别监视该html文件上的文件更改。

我怎样才能做到这一点？

对于上下文，这是我的配置的要点webpack：

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,
  }
};

现在我还想告诉 webpack 在以下情况下也触发重建

'public/index.html'

变化。

请注意，我像这样手动调用 webpack 和开发服务器

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

所以我也有我所拥有的所有选项，JavaScript但不可能通过配置来做到这一点