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

Question

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!

score 1 · Accepted Answer · answered Apr 12 '21 at 17:01

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! :)

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

1 Answers1