如何让Webpack热模块替换与Handlebars模板一起工作？

Question

我正在使用handlebars-loader:

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

我也正在使用html-webpack-plugin。

在使用Webpack Dev Server时，一切都按照我的要求工作：

如果保存了handlebars模板或SCSS文件的更改，则自动重新加载页面。

然而，一旦我在devServer下启用hot: true，HMR开始处理SCSS更改（即CSS在不进行完全重新加载的情况下更新），这正是我想要的，但如果我更改handlebars模板，HMR不起作用，而常规的“热重载”（即重新加载整个页面）也停止工作。

有什么想法吗？

如果SCSS更改可以使用HMR，并且handlebars模板可以使用常规的“热重载”（这种方式已经在hot: true关闭时工作），那也可以。

- user10686399

---

分享你的完整Webpack配置以进行评估。 - Timothy

Answer 1

创建了一个简单的配置，用于演示默认情况下它正在工作。 https://github.com/nickbullock/webpack-hmr-hbs-example

请使用以下方式运行：

npm i;
npm run start;

然后更改hello.hbs，例如添加{{test}}，然后将其值添加到index.js文件的选项中test: 'hola!'。之后，您将看到来自HMR的日志，并且webpack将成功更新您的文件和视图。

调试项目的步骤：

1. 将选项hotOnly: true设置为devServer配置部分。这将防止实时重新加载。
2. 请在处理程序模板重新加载后向我们展示HMR日志。
3. 请还向我们展示您的webpack配置。

- nickbullock