我正在使用“webpack”构建一个项目
我有index.js作为条目。main.js作为绑定后生成的输出。
我的文件树看起来像这样
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- main.js
|- index.html
|- /src
|- index.js
|- /node_modules
字符串
我还使用terminal启动RPM init并安装其他包,如节点模块和样式加载器
基本上,当我尝试捆绑我得到“opentab是没有定义”在控制台什么是问题的文件如下
**Webpack **
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
**Index.html
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Page</title>
<link rel="stylesheet" href="/src/style.css">
<script src="/dist/main.js"></script>
</head>
<body>
<button class="tablink" onclick="openTab(event, 'tab1')"> Home </button>
<button class="tablink" onclick="openTab(event, 'tab2')"> Menu </button>
<button class="tablink" onclick="openTab(event, 'tab3')"> Contact us</button>
<div id="tab1" class="tabcontent">
<div class="nest">
<div id="about" >
<h1>Manqal Dönər <br><i>6 il sizinlə</i></h1>
<p>İşdən evə yorğun gedib yemək hazirlamaq yerinə, meyumuzdan sifariş edin və evinizdə dadli təamlardan dadaraq ailənizlə gözəl vaxt keçirin!
<br>Ünvan:
<br> <br>📍Baku , Mərdəkan qəs. Makaron fabriki ilə üz-üzə. <br>
<br> Əlaqə: <br><br>
📱 0559734939
<br> 📱 0709734939
</p>
<h2>Work Hours</h2>
Sunday: 8am - 8pm <br><br>
Monday: 6am - 6pm <br><br>
Tuesday: 6am - 6pm <br><br>
Wednesday: 6am - 6pm <br><br>
Thursday: 6am - 10pm <br><br>
Friday: 6am - 10pm <br><br>
Saturday: 8am - 10pm <br><br>
</div>
</div>
</div>
<div id="tab2" class="tabcontent">
<div class="nest-2">
<h1>Menu</h1>
<h2>Drinks</h2>
<h3>Balli Chai</h3>
<p>A Warm, sweet tea made with the highest quality honey and a bit of lemon to start your day off right!</p>
<h3>Albali Chai</h3>
<p>A comforting, almost filling, tea that is infused with the flavors of several kinds of berries. Best served cold, but can be served hot on request.</p>
<h2> Chef Special </h2>
<h3> Doner in Mangal </h3>
<p>Doner made with love and the greasy and tasteful hands of Chef Seyran</p>
</div>
</div>
<div id="tab3" class="tabcontent">
<h1>Managers</h1>
<h3>Chief Manager</h3>
<p>Arif Rzayev <br><br>011-111-11-11</p>
<h3>Middle Manager</h3>
<p>Orxan Mahmudov <br><br>011-222-22-22</p>
<h3>Front-line Manager</h3>
<p>Akif Quliyev <br><br>011-333-33-33</p>
</div>
</body>
</html>
**index.js**
import './style.css';
function openTab(event, tabName) {
// Hide all tab contents
const tabContents = document.querySelectorAll('.tabcontent');
tabContents.forEach(content => {
content.classList.remove('active');
});
// Show the selected tab content
const selectedTab = document.getElementById(tabName);
selectedTab.classList.add('active');
}
**css**
/* Your CSS styles for tabs and content here */
.tabcontent {
display: none;
}
.tabcontent.active {
display: block;
}
型
1条答案
按热度按时间kjthegm61#
错误是由
index.html
中的按钮引起的:字符串
当点击时,浏览器期望能够在全局范围内调用函数
openTab()
,即window
对象。然而,在您的index.js
中:型
您定义了这个
openTab()
函数,但是Webpack只在文件的范围内起作用。因此,openTab()
不存在于全局范围内,无法在上述按钮的onclick
中访问。您可以考虑手动将
openTab()
注册到window
的全局作用域,方法是将openTab()
分配给window
对象,如下所示:型
或
型
或者,您可以将JavaScript封装起来,并将事件侦听器连接到
index.js
中:型
删除
index.html
中按钮的onclick
属性:型