webpack bundle 不让 html 识别我的 js 函数

Question

我的HTML抽屉里有一个函数，当页面加载时，它会自动点击第一个选项卡。当我使用 webpack 捆绑 JS 时，html 给了我一个Uncaught ReferenceError: openTab is not defined，当页面加载时，它不允许我的 openTab 函数工作。正常的控制器.js正常工作。

webpack.config.js

const path = require('path');
module.exports = {
entry: {
app: './src/js/controller.js'
},
output: {
path: path.resolve(__dirname, 'dist/build'),
filename: 'controller.bundle.js'
},
module : {
rules: [{
// A regex that looks at all Javascript files
test: /.js?$/,
exclude : /node_modules/,
loader: 'babel-loader',
//this is where we define our presets
query: {
presets:['@babel/preset-env']
}
}]
}
}

包.json

"main": "controller.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"express": "^4.17.1",
"regenerator-runtime": "^0.13.5"
}
}

首页.html//内容 最后一个div 之后是每个选项卡内容的位置。当函数不运行时，所有内容都可见。

<div class="drawer__content">
<div class="tab">
<button class="tablinks " onclick="openTab(event, 'Home')" id="defaultOpen"><i class="fas fa-home"></i></button>
<button class="tablinks" onclick="openTab(event, 'Fav')"><i class="fas fa-star"></i></button>
<button class="tablinks" onclick="openTab(event, 'Settings')"><i class="fas fa-cogs"></i></button>
</div>

控制器.js

function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click()

Answer 1

我发现了一篇关于有相同问题的人的旧帖子。我认为这与使函数全球化有关。

我需要做的是在我的 HTML 中使用onclick更改我的函数

function openTab()

自

openTab = function()

这解决了一切。

Answer 2

使用addEventListener而不是将onclick="openTab(event, 'Home')"直接放入 HTML 中的按钮可能会有所帮助。 例如，对于带有id="defaultOpen"的按钮，请尝试使用下一个：

const button1 = document.getElementById("defaultOpen");
button1.addEventListener("click", function () {
openTab(event, 'Home')
});