How do I make webpack Hot Module Replacement work with handlebars templates?

Question

I am using handlebars-loader:

  {
    test: /\.hbs$/,
    loader: 'handlebars-loader',
  }

I am also using the html-webpack-plugin.

Everything works as I want it using Webpack Dev Server:

automatically reloading the page if changes to the handlebars templates or the SCSS files are saved.

However, once I enable hot: true under devServer, HMR starts working for SCSS changes (i.e. the CSS gets updated without a full reload), which is what I want, but if I change the handlebars templates, HMR does not work, and the regular "hot reload" (i.e. reloading the entire page) stops working as well.

Any ideas?

It would be fine too, if HMR would work for SCSS changes, and regular "hot reload" for the handlebars templates (the way it already works without hot: true).

Mellman

Share your entire webpack config to evaluate – Benildas

Answer 1

Created a simple configuration for you to show that it is working by default. https://github.com/nickbullock/webpack-hmr-hbs-example

Please run it with

npm i;
npm run start;

then change hello.hbs, for example add {{test}} and then add it's value to the options in the index.js file test: 'hola!'. After that you will see logs from HMR and webpack will update your files and view successfully.

Steps to debug it on your project:

1. Set option hotOnly: true to the devServer configuration section. This will prevent live-reloading.
2. Show me HMR logs after handlebars template reload please.
3. Please also show us your webpack configuration

Stefaniestefano