如何使 webpack 热模块替换与车把模板一起使用？答案

【问题标题】：How do I make webpack Hot Module Replacement work with handlebars templates?如何使 webpack 热模块替换与车把模板一起使用？
【发布时间】：2019-11-17 22:34:06
【问题描述】：

我正在使用车把加载器：

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

我也在使用 html-webpack-plugin。

使用 Webpack 开发服务器一切正常：

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

但是，一旦我在devServer 下启用hot: true，HMR 就会开始为 SCSS 更改工作（即 CSS 会在没有完全重新加载的情况下更新），这是我想要的，但如果我更改车把模板，HMR 会不起作用，并且常规的“热重新加载”（即重新加载整个页面）也停止工作。

有什么想法吗？

如果 HMR 可以用于 SCSS 更改，并为车把模板定期“热重新加载”（没有hot: true 时它已经工作的方式），那也很好。

【问题讨论】：

分享你的整个 webpack 配置来评估

标签： javascript webpack handlebars.js webpack-dev-server webpack-hmr

【解决方案1】：

为您创建了一个简单的配置，以显示它默认工作。 https://github.com/nickbullock/webpack-hmr-hbs-example

请运行它

npm i;
npm run start;

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

在您的项目上调试它的步骤：

将选项hotOnly: true 设置为devServer 配置部分。这将防止实时重新加载。
请在车把模板重新加载后显示 HMR 日志。
请同时向我们展示您的 webpack 配置

【讨论】：