Menu
I have a basic HTML page with a button:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<button id="button" onclick="uclicked()">Click me</button>
<script src="./bundle.js"></script>
</body>
</html>
and an app.js:
//(function(){
console.log('started up')
function uclicked(){
console.log('You clicked');
}
//})();
webpack is installed and webpack --watch succeeds. The webpack.config.js is:
module.exports={
entry: './app.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
}
When I load the page console.log is working but when I push the button I get Uncaught ReferenceError: uclicked is not defined.
If I replace <script src="./bundle.js"></script> with <script src="./app.js"></script> and bypass webpack the button clicks fine. Why doesn't this basic webpack setup work?
578
When you run the file over webpack, webpack will try not to litter the global scope and so the function will not be made available globally by default.
If you want the function to be accessible outside the scope of he JS file, you should put it in the global scope.
function uclicked() {
// do something
}
window.uclicked = uclicked;
Or just:
window.uclicked = function() {
// do something
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With