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

Issue

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! 🙂