基本的WebPack不工作的按鈕點擊功能 - 未捕獲引用錯誤：未定義

我有一個按鈕，一個基本的HTML頁面：基本的WebPack不工作的按鈕點擊功能 - 未捕獲引用錯誤：未定義

<!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設置不工作？

來源

2016-03-03 mcktimo

'uclicked'引用全局函數，但的WebPack默認會包住你的'bundle'在iife，保護全球範圍。在你的代碼中使用'addEventListener'，或者使用'expose-loader'將你的應用程序公開爲公共對象https://github.com/webpack/expose-loader –

當你通過webpack運行該文件時，webpack將盡量不拋棄全局作用域，因此默認情況下該函數將不能全局使用。

如果您希望該功能可以在JS文件範圍之外訪問，則應將其放入全局範圍。

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

或者只是：

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

來源

2016-03-06 10:09:07

如何在不使其全局的情況下訪問該函數？ – vidstige

@vidstige你將不得不手動設置事件處理程序的按鈕是這樣的：的document.getElementById（ 'buttonID'）的onClick =函數（）{/ *做somethiing * /} 您需要確保這個腳本在加載html之後調用**（你可以通過在的末尾調用腳本標籤來實現）。 –

基本的WebPack不工作的按鈕點擊功能 - 未捕獲引用錯誤：未定義

回答

相關問題