Webpack-hot-middleware 增加了事件监听器答案

【问题标题】：Webpack-hot-middleware multiplies event listenersWebpack-hot-middleware 增加了事件监听器
【发布时间】：2020-04-11 14:46:48
【问题描述】：

在尝试设置我的新开发环境（节点服务器 + 客户端，只有 vanilla js）时，我遇到了 webpack-hot-middleware 来热重新加载我的前端更改。一切都会好的，但是如果有这样的代码

$button.addEventListener('click', () => {
  // any code here
});

与热重载后相比，当您点击 $button 时，此事件侦听器将比以前多触发一次！非常不舒服，但我没有发现任何人关于类似问题的任何报告。谁能帮我解决这个问题的可能解决方法？

【问题讨论】：

标签： javascript node.js express webpack webpack-hot-middleware

【解决方案1】：

我建议阅读webpack hot module replacement documentation，它描述了如何处理此类问题。

基本上，当您的代码发生更改时，您需要使用module.hot.accept 更新事件绑定。

if (module.hot) {
  module.hot.accept('./yourCode.js', function() {
    console.log('Accepting the updated yourCode module!');

    $button.removeEventListener('click', oldHandler);
    $button.addEventListener('click', newHandler);
  })
}

棘手的一点是正确清除事件侦听器，因为您需要引用原始处理程序，或者您需要clear all handlers。

【讨论】：