时间戳

首页 > 解决方案 > 如何使 webpack 热模块替换与车把模板一起使用？

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

问题描述

我正在使用车把加载器：

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

我也在使用 html-webpack-plugin。

使用 Webpack Dev Server 一切正常：

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

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

有任何想法吗？

如果 HMR 可以用于 SCSS 更改，并且可以为车把模板定期“热重新加载”（它已经在没有hot: true.

标签： javascriptwebpackhandlebars.jswebpack-dev-serverwebpack-hmr

解决方案

为您创建了一个简单的配置，以显示它默认工作。 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 配置

推荐阅读