Проблема двойного клика в dev-server webpack

Подскажите, пожалуйста. Столкнулся с такой проблемой: начал переносить разработку сайта под webpack, сделал стандартный конфиг, всё хорошо работает, кроме одной детали, связанной с dev-server. Есть функционал при клике:

**if(target.classList.contains("burger")) {
        let burgerMenu = document.querySelector(".menu__wrapper");
        let burger = document.querySelector(".burger");
        burger.classList.toggle("active");
        burgerMenu.classList.toggle("active");   
    }**

Если пробовать протестировать это всё не на dev-server, то код отрабатывает хорошо. Но как только я запускаю dev-server, при том же клике будто бы срабатывает ещё один неизвестный мне клик от vm. введите сюда описание изображения.(выводил target при клике, здесь мышью сделан всего один клик). Из-за чего класс active через тогл сразу и добавляется, и убирается, оставляя страницу без перемен. Каким образом можно от этого избавиться?


Ответы (1 шт):

Автор решения: yar85

Ситуации повторного выполнения скрипта могут быть вызваны тем что скрипт дважды подключается к выходному документу: и в исходной разметке (в html-файле), и плагином сборщика (например, так может делать HtmlWebpackPlugin).
Проверить такую ситуацию можно обратив внимание на сгенерированный сборщиком документ. То есть, просмотрев либо полученную в результате сборки разметку, либо (через devtools браузера) список ассетов страницы в разделе "Sources".

В таких случаях автоматического встраивания собранных скриптов - устранить двойное выполнение скрипта можно просто убрав в исходном html-файле тот тег <script>, который подключает js-файлик явным (неавтоматическим) образом.

→ Ссылка