基本 webpack 不适用于按钮单击功能 - 未捕获的引用错误:未定义

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

本文关键字：引用 错误 未定义 不适用 webpack 适用于 按钮 功能 单击 基本      更新时间：2023-09-26

>我有一个带有按钮的基本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="./app.js"></script>替换<script src="./bundle.js"></script>并绕过 webpack，按钮点击正常。为什么这个基本的 webpack 设置不起作用？

当你在 webpack 上运行文件时，webpack 会尽量不要乱扔全局范围，因此默认情况下该函数不会全局可用。

如果您希望该函数在 JS 文件的范围之外可访问，则应将其放在全局范围内。

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

或者只是：

window.uclicked = function() {
  // do something
}
相关文章：