Webpack Hot Reload对HTML文件不生效，如何实现无整页刷新更新？

解决方案 #

核心原理 #

默认配置下HTML模板没有被纳入Webpack的模块依赖监听链路，修改后只会触发HtmlWebpackPlugin重新生成文件，无法触发HMR增量更新，仅能触发整页重载。我们需要手动将HTML加入依赖并编写更新逻辑实现无刷新替换。

具体修改步骤 #

• 入口文件引入HTML模板
  在你的index.js中引入入口HTML文件，让webpack通过html-loader将其纳入依赖监听范围：

import './index.html'

• 新增HTML热更处理逻辑
  修改原有的HMR接受逻辑，新增HTML文件更新后的替换逻辑，改后的完整index.js代码如下：

import tripleMe from './tripleMe';
import './sass/main.scss';
import './index.html';

if (module.hot) {
    // 单独处理HTML文件更新
    module.hot.accept('./index.html', () => {
        const updatedHtml = require('./index.html').default;
        // 直接替换页面内容，无需重载
        document.open();
        document.write(updatedHtml);
        document.close();
    })
    // 保留原有JS、CSS的热更逻辑
    module.hot.accept();
}

• 可选优化devServer配置
  可以移除之前添加的watchContentBase: true配置，避免不必要的整页重载触发。

注意事项 #

• 该方案依赖你已配置的html-loader，无需额外安装其他插件
• HTML更新替换后不会丢失当前页面的JS运行时状态，仅更新DOM结构
• 如果项目存在多页面多HTML入口，可按照相同逻辑为每个HTML文件添加对应的热更处理逻辑

内容的提问来源于stack exchange，提问作者ewcoder