如何仅对某些类型的文件在 webpack 上启用实时重新加载

Question

在使用 express 和 EJS.

时，我已经为 webpack 想出了一个完美的设置两天多了

这是我现在所在的位置：

https://github.com/ZeldOcarina/webpack-express-ejs-setup

现在我为 SCSS 和前端 JS 更改启用了 HMR。

我需要添加的最后一件事是在 views/ejs 更改时实时重新加载。如果我在 webpack.dev.js 上将 liveReload 更改为 true，但随后 HMR 会随着所有内容重新加载而中断。

我找不到仅针对 EJS 文件更改重新加载的方法。

有人有什么建议吗？

谢谢！

Answer 1

伙计们，我做到了！

方法是在before devServer hook中直接使用chokidar：

    devServer: {
        contentBase: "./src/",
        before(app, server) {
          chokidar.watch("./views").on(
            "all",
            debounce(function () {
              console.log("THIS IS HAPPENING!!!!!!");
              server.sockWrite(server.sockets, "content-changed");
            })
          );
        },
[...rest of devServer configuration]

debounce 是一个 lodash 函数。要检查完整配置，请参阅问题中的 GitHub 回购协议，我会保持开放状态！ :)

如何仅对某些类型的文件在 webpack 上启用实时重新加载

How to enable live reload on webpack only for some type of files

ejs

express

webpack

webpack-hmr

webpack-5