我使用revealjs创建响应式演示文稿，revealjs的问题是所有幻灯片代码都写在一个HTML文件中，这在某种程度上可能会很混乱（一些演示文稿的HTML代码在一个文件中达到了大约3500行HTML）。
我现在正在重新构建这个系统，我希望有一个名为slides的目录，其中包含每个幻灯片HTML文件。每个文件都命名为slidenumber.html。最后，我希望将webpack 5中的所有文件捆绑到dist中的一个HTML文件中。我设法实现了这一点，但它与dev服务器存在问题。
webpack.config.js

// ... imports .... 

module.exports = {
  ...,
  plugins: [
    ....,
    new HtmlWebpackPlugin({
      filename: "index.html",
      inject: true,
      templateContent: getTemplate(),
    }),
    new WatchExternalFilesPlugin({
      files: ["./slides/*.html"],
    }),
  ],
  module: {
    rules: [...],
  },
  devServer: {
    port: 8080,
  },
};

getTemplate函数在slides目录中的HTML文件上循环，并返回 Package 在模板样板中的文件
这是参考getTemplate.js的函数

const fs = require("fs/promises");
const path = require("path");
const { parse } = require("node-html-parser");

module.exports = async () => {
  const template = parse(
    await fs.readFile(path.join(__dirname, "../templates/index.html"))
  );
  const files = await fs.readdir(path.join(__dirname, "../slides"));

  for await (const fileName of files) {
    const slide = parse(
      await fs.readFile(path.join(__dirname, `../slides/${fileName}`))
    );
    template.querySelector("#slides").appendChild(slide);
  }

  return template.toString();
};

以上所有代码在构建时都运行良好，但在运行dev服务器时，我无法让HtmlWebpackPlugin在slides目录中的任何HTML幻灯片文件发生更改时重新执行templateContent: getTemplate()，因此，当我编辑slides目录中的任何幻灯片HTML文件时，我没有获得任何更新。
我知道templateContent应该只在服务器启动时运行，但我想知道是否有任何其他特性可以让我达到所需的行为。
谢谢你能来这里，原谅我的英语，我不是一个母语。