1
我有下面index.html文件:browserify /打破的WebPack簡單的HTML文件(沒有定義函數)
<html>
<head>
</head>
<body>
num1:<input id="num1" type="number">
num2:<input id="num2" type="number">
<button type="button" onclick="myFunction()">compute</button>
answer:<input id="demoInput" type="text"> and answer: <p
id="demoHtml"></p>
</body>
<script src="index.js"></script>
其中index.js是
function myFunction() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var ans = parseInt(x) + parseInt(y)
document.getElementById("demoInput").value = ans;
document.getElementById("demoHtml").innerHTML = ans;
}
這上面的代碼完美。使用webpack/browserify會造成以下方面的困難。如果我叫
browserify index.js > bundle.js
然後編輯index.html文件讀取
<script src="bundle.js"></script>
並運行index.html文件,在開發工具的瀏覽器控制檯顯示在按下按鈕計算以下錯誤:
index.html:14 Uncaught ReferenceError: myFunction is not defined at
HTMLButtonElement.onclick (index.html:14)
Webpack提出了同樣的挑戰。也許我正在實施webpack和browserify不正確?在網上搜索幾乎沒有見識。