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);
  })
}

棘手的一點是正確清除事件偵聽器，因為您需要引用原始處理程序，或者您需要清除所有處理程序。