基本の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'を包み込むます。あなたのコードで '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

グローバルにすることなく関数にアクセスするには？あなたがする必要があるのonClick =機能（）{/ * somethiingを行う* /} のdocument.getElementById（ 'buttonID'）：。 – vidstige

あなたは、手動でこのようなボタンのイベントハンドラを設定する必要があります@vidstige ** htmlがロードされた後にこのスクリプトが** **呼び出されていることを確認してください（これは、の最後にスクリプトタグを呼び出すことで可能です）。 –

基本のWebPACK - キャッチされない参照エラー：未定義

答えて

関連する問題