expresswebpackejswebpack-hmrwebpack-5

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


I have been struggling for over two days to come up with the perfect setup for webpack when using express and EJS.

This is where I am at at the moment:

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

Right now I have HMR enabled for SCSS and front-end JS changes.

The last thing I need to add is live reload on views/ejs changes. It works if I change liveReload to true on webpack.dev.js but then HMR breaks as everything reloads.

I can't find a way to reload only for EJS file changes.

Does anyone have any suggestions?

Thank you!


Solution

  • I've made it guys!

    The way is to use chokidar directly in the before devServer hook:

        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 is a lodash function. To check the full configuration please refer to the GitHub repo in the question, I'll leave that open! :)