使用HotModuleReplacementPlugin时内容未更新的两类问题求助

这两个HMR失效的问题其实都指向同一个核心点——静态import的模块引用不会在HMR时自动更新，我来逐个拆解解决：

问题一：HMR更新后按钮点击仍输出旧文本 #

问题根源 #

你通过静态import引入的printMe变量，会绑定到初始加载的函数引用上。当HMR触发module.hot.accept回调时，虽然你重新调用了component()创建新元素，但component()内部使用的还是旧的printMe引用——静态导入的变量不会自动同步为新模块的导出内容，所以按钮的点击事件依然指向旧函数，自然输出旧文本。

修复方案 #

在module.hot.accept的回调里，主动重新获取更新后的printMe模块导出，然后更新组件的引用（或者直接修改按钮的点击事件）。修改后的main.js代码如下：

import _ from 'lodash'; 
import printMe from './print.js'; 

function component() { 
  var element = document.createElement('div'); 
  var btn = document.createElement('button'); 
  element.innerHTML = _.join(['Hello', 'webpack'], ' '); 
  btn.innerHTML = 'Click me and check the console!'; 
  btn.onclick = printMe; 
  element.appendChild(btn); 
  return element; 
} 

let element = component(); 
document.body.appendChild(element); 

if (module.hot) { 
  module.hot.accept('./print.js', function() { 
    console.log('Accepting the updated printMe module!');
    // 重新获取更新后的printMe函数
    const newPrintMe = require('./print.js').default;
    // 移除旧元素并重新渲染
    document.body.removeChild(element);
    element = component();
    // 替换按钮的点击事件为新函数
    element.querySelector('button').onclick = newPrintMe;
    document.body.appendChild(element); 
  }); 
}

问题二：首次HMR输出旧文本，二次HMR无日志 #

问题根源 #

1. 首次输出旧文本：和问题一核心原因一致，静态导入的printMe还是旧的函数引用，component()调用的是旧函数，所以返回旧文本。
2. 二次HMR无日志：第一次HMR触发后，由于没有正确更新模块引用，Webpack的HMR机制无法识别后续的模块变更，导致回调不再触发；另外，未清理旧DOM也可能干扰HMR的状态判断。

修复方案 #

同样需要在回调里主动获取新的模块导出，同时优化DOM更新逻辑，确保每次HMR都能正确响应：

import printMe from './print.js';

function component(usePrintMe = printMe) {
  var element = document.createElement('div');
  element.innerHTML = usePrintMe();
  return element;
}

let currentElement = component();
document.body.appendChild(currentElement);

if (module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');
    // 获取最新的printMe导出
    const newPrintMe = require('./print.js').default;
    // 移除旧元素
    document.body.removeChild(currentElement);
    // 使用新函数创建并挂载新组件
    currentElement = component(newPrintMe);
    document.body.appendChild(currentElement);
    // 打印最新文本
    console.log(newPrintMe());
  });
}

核心总结 #

Webpack HMR不会自动更新静态import的变量引用（受ES模块静态绑定特性限制）。模块更新后，必须在module.hot.accept回调里，通过require或动态import()主动获取新的模块导出，再同步更新对应的引用或DOM元素，才能让HMR真正生效。

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