在某些文件更改时重新加载 Webpack Html 模板答案

【问题标题】：Reload Webpack Html Template on Certain Files Change在某些文件更改时重新加载 Webpack Html 模板
【发布时间】：2023-02-11 01:37:48
【问题描述】：

我正在使用 revealjs 创建响应式演示文稿。 revealjs 的问题是所有幻灯片代码都写在一个 HTML 文件中，这在某种程度上可能很混乱（某些演示文稿的 HTML 代码在该单个文件中达到了大约 3500 行 HTML）。

我现在正在重组这个系统，我想要一个名为 slides 的目录，其中包含每个幻灯片 HTML 文件。这些文件中的每一个都被命名为 slidenumber.html。最后，我想将所有带有 webpack 5 的文件打包到 dist 中的单个 HTML 文件中。我设法实现了这一点，但开发服务器存在问题。

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 文件，并返回用模板样板包装的文件

这是参考功能 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();
};

以上所有代码在构建时都运行良好，但是在运行开发服务器时，我无法让 HtmlWebpackPlugin 在幻灯片目录中更改任何 HTML 幻灯片文件时重新执行 templateContent: getTemplate()，结果，当我在幻灯片目录中编辑幻灯片 HTML 文件的任何文件，我没有得到任何更新。

我知道 templateContent 应该只在服务器启动时运行，但我想知道是否有任何其他功能可以让我达到所需的行为。

谢谢你来到这里，请原谅我的英语，我不是母语人士。

【问题讨论】：

标签： javascript webpack babeljs webpack-dev-server bundling-and-minification

【解决方案1】：

我可以通过从捕获任何请求并返回 getTemplate 函数的输出的开发服务器选项设置中间件来实现我在问题中描述的行为。

这是开发服务器的配置 webpack.config.dev.js

// ...imports...

module.exports = {
  mode: "development",
  entry: { index: "./main.js" },
  output: {...},
  module: {
    rules: [...],
  },
  devServer: {
    port: 8080,
    watchFiles: ["./slides/*.html"],
    hot: true,
    onBeforeSetupMiddleware: function (devServer) {
      devServer.app.get("/", async function (req, res) {
        res.send(await getTemplate());
      });
    },
  },
};

这些是生产服务器的配置 webpack.config.production.js

// ...imports...

module.exports = {
  mode: "production",
  entry: { index: "./main.js" },
  output: {...},
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      templateContent: getTemplate(),
      inject: false,
    }),
  ],
  module: {
    rules: [...],
  },
};

我像往常一样在生产中使用 webpackHtmlPlugin 但在开发中，我根本没有使用它，因为它无法在构建时重新加载模板

在开发中，尽管我无法将哈希值添加到已编译的 js 文件中，因为我无法预测哈希值并注入其脚本标记。编译后的文件与原始文件同名，我在 HTML 模板文件中手动添加了脚本标签。

希望这对任何人都有帮助！

【讨论】：