Проблема двойного клика в 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 шт):
Ситуации повторного выполнения скрипта могут быть вызваны тем что скрипт дважды подключается к выходному документу: и в исходной разметке (в html-файле), и плагином сборщика (например, так может делать HtmlWebpackPlugin).
Проверить такую ситуацию можно обратив внимание на сгенерированный сборщиком документ. То есть, просмотрев либо полученную в результате сборки разметку, либо (через devtools браузера) список ассетов страницы в разделе "Sources".
В таких случаях автоматического встраивания собранных скриптов - устранить двойное выполнение скрипта можно просто убрав в исходном html-файле тот тег <script>, который подключает js-файлик явным (неавтоматическим) образом.