Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
545 views
in Technique[技术] by (71.8m points)

javascript - Basic webpack not working for button click function - Uncaught Reference error: undefined

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...