Как поправить функцию, чтобы она работала после обработки Webpack?

Question

[vova1213]

Плагин webpack для gulp после обработки оборачивает мою функцию, которая вызывается из html по onclick в самовызывающуюся функцию, и она перестает работать.

/******/ (function() { // webpackBootstrap
/******/ 	"use strict";
var __webpack_exports__ = {};



function tabsChanger(evt, a) {
	var i, tab_content, tab_links;
	tab_content = document.getElementsByClassName("tab_content");
	for (i = 0; i < tab_content.length; i++) {
		tab_content[i].style.display = "none";
	}
	tab_links = document.getElementsByClassName("tabs_buttons");
	for (i = 0; i < tab_links.length; i++) {
		tab_links[i].className = tab_links[i].className.replace(" active", "");
	}
	document.getElementById(a).style.display = "block";
	evt.currentTarget.className += " active";
}



/******/ })()
;

Answer 1

[Сергей delphinpro]

Она не перестает работать. Функция исчезает из глобального пространcтва имен и становится недоступной.
Можно ее принудительно засунуть в объект window

window.tabsChanger = function(evt, a) {
    // ...
}

<div onclick="tabsChanger">
</div>

Но, возможно лучшим вариантом будет навешивать обработчик с помощью addEventListener

document.querySelector(...)?.addEventListener('change', function(evt){

})

Answer 2

[Дмитрий Беляев]

Не навешивать обработчики из html.
https://developer.mozilla.org/en-US/docs/Web/API/E...