Webpack-hot-middleware увеличивает количество прослушивателей

Question

Пытаясь настроить мою новую среду разработки (сервер узла + клиент с только vanilla js на борту), я столкнулся с webpack-hot-middleware для горячей перезагрузки моих изменений интерфейса. И все было бы хорошо, но если есть какой-либо код, подобный этому

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

, чем после горячей перезагрузки, при нажатии кнопки $ этот прослушиватель событий будет срабатывать еще один раз, чем раньше! Ужасно неудобно, но я не нашел ни одного сообщения о подобной проблеме от кого-либо. Может кто-нибудь помочь мне с возможными обходными путями этой проблемы?

Answer 1

Я рекомендую прочитать документацию по замене горячих модулей веб-пакета , в которой описано, как решать подобные проблемы.

В основном, когда ваш код изменяется, вам нужно обновить привязку события, используя 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 все обработчики .