Базовый веб-пакет, не работающий для функции нажатия кнопки - Неподготовленная эталонная ошибка: undefined

У меня есть базовая страница HTML с кнопкой:

<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body>
    <button id="button" onclick="uclicked()">Click me</button>
    <script src="./bundle.js"></script>
</body>
</html>

и app.js:

//(function(){
    console.log('started up')
    function uclicked(){
        console.log('You clicked');
    }
//})();

установлен веб-пакет, а webpack --watch - успешно. Файл webpack.config.js:

module.exports={
    entry: './app.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    }
}

Когда я загружаю страницу console.log, но когда я нажимаю кнопку, я получаю Uncaught ReferenceError: uclicked is not defined.

Если я заменил <script src="./bundle.js"></script> на <script src="./app.js"></script> и обход webpack, кнопка щелкает. Почему эта базовая настройка веб-пакета не работает?

Ответ 1

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

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

function uclicked() {
  // do something
}
window.uclicked = uclicked;

Или просто:

window.uclicked = function() {
  // do something
}