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不正确?在网上搜索几乎没有见识。