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

Question

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

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

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

Answer 1

我建议阅读webpack 热模块替换文档，其中描述了如何处理此类问题。

基本上，当您的代码更改时，您需要使用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);
  })
}

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