无法在JavaScript中找到与Webpack捆绑相关的错误

zazmityj 于 9个月前发布在 Webpack

关注(0)|答案(1)|浏览(93)

我正在使用“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;
}

型

webpack

来源：https://stackoverflow.com/questions/77729283/cant-figure-the-error-related-to-webpack-bundling-in-javascript

1条答案

按热度按时间

kjthegm61#

错误是由index.html中的按钮引起的：

<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>

字符串
当点击时，浏览器期望能够在全局范围内调用函数openTab()，即window对象。然而，在您的index.js中：

function openTab(event, tabName) {

型
您定义了这个openTab()函数，但是Webpack只在文件的范围内起作用。因此，openTab()不存在于全局范围内，无法在上述按钮的onclick中访问。
您可以考虑手动将openTab()注册到window的全局作用域，方法是将openTab()分配给window对象，如下所示：

window.openTab = function openTab(event, tabName) {

型
或

function openTab(event, tabName) {
  // …
}
window.openTab = openTab;

型
或者，您可以将JavaScript封装起来，并将事件侦听器连接到index.js中：

// …

document.querySelectorAll('.tablink').forEach((tabLink, index) => {
  tabLink.addEventListener('click', (event) => {
    openTab(event, index + 1);
  });
});

型
删除index.html中按钮的onclick属性：

<button class="tablink"> Home </button>
<button class="tablink"> Menu </button>
<button class="tablink"> Contact us</button>

型

赞(0）回复(0）举报 9个月前

我来回答

无法在JavaScript中找到与Webpack捆绑相关的错误

1条答案

相关问题

热门标签

最新问答