我有一个带按钮的基本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并且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,则按钮会很好地点击。为什么这个基本的webpack设置不起作用?
答案 0 :(得分:67)
当您通过webpack运行该文件时,webpack将尽量不要乱丢全局范围,因此默认情况下该功能不会全局可用。
如果您希望在JS文件范围之外访问该函数,则应将其置于全局范围内。
function uclicked() {
// do something
}
window.uclicked = uclicked;
或者只是:
window.uclicked = function() {
// do something
}