Can't figure the error related to Webpack bundling in Javascript

I am building a project using "webpack"

i have index.js as an entry. main.js as an output which is generated after bundling.

My file tree looks like this

|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
  |- main.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

I also use terminal to initiate rpm init and install other packages such as node modules and style loaders

Basically when i try to bundle i get "opentab is not defined" in console what is the problem the files are as follows

**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;
}

Solution

The error is caused by your buttons in 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>

When clicked, the browser expects to able to call a function openTab() in the global scope, i.e. the window object. However, in your index.js:

function openTab(event, tabName) {

You define this openTab() function, but Webpack scopes functions to the scope of the file only. Thus, openTab() does not exist in the global scope to be accessible in the onclick of the aforementioned buttons.

You could consider manually registering openTab() to the global scope of window by assigning openTab() to the window object like:

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

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

Alternatively, you can keep your JavaScript enclosed, and wire up the event listeners in index.js:

// …

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

With the onclick attributes of the buttons in index.html being removed:

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