I recently started learning webpack and ran into the following problem. I have a configuration file webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./public/js/index.js",
  output: {
    path: path.resolve(__dirname, "./dist/js"),
    globalObject: "this",
    filename: "vendor.js",
  },
  watch: true,
  devtool: "source-map",
  module: {},
};

I’m using express.js as the server. I have a main file index.js and two files where I divided the logic into modules: tabs.js

function tabs() {
  const tabcontent = document.querySelectorAll(".tabcontent");
  const tabheader__item = document.querySelectorAll(".tabheader__item");
  const tabheader__items = document.querySelector(".tabheader__items");
  function hideTabContent() {
    tabcontent.forEach((tab) => {
      tab.style.display = "none";
    });
    tabheader__item.forEach((item) =>
      item.classList.remove("tabheader__item_active")
    );
  }
  hideTabContent();
  function showTabContent(index = 0) {
    tabcontent[index].style.display = "block";
    tabheader__item[index].classList.add("tabheader__item_active");
  }
  showTabContent();

  tabheader__items.addEventListener("click", (e) => {
    if (e.target.classList.contains("tabheader__item")) {
      tabheader__item.forEach((elem, index) => {
        if (e.target === elem) {
          hideTabContent();
          showTabContent(index);
        }
      });
    }
  });
}

module.exports = tabs;

and modal.js:

function modal() {
  const data_modal = document.querySelectorAll("[data-modal]");
  const modalWindow = document.querySelector(".modal");
  const data_close = document.querySelector("[data-close]");

  const showModal = () => {
    modalWindow.style.display = "block";
    document.body.style.overflow = "hidden";
  };
  const closeModal = () => {
    modalWindow.style.display = "none";
    document.body.style.overflow = "auto";
  };

  data_modal.forEach((modalItem) => {
    modalItem.addEventListener("click", () => {
      showModal();
    });
  });
  data_close.addEventListener("click", () => {
    closeModal();
  });

  document.body.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
      closeModal();
    }
  });
}

module.exports = modal;

I’m trying to require these two functions in the main index.js file. The console shows no errors. Here is the index.js file

window.addEventListener("DOMContentLoaded", () => {
  const tabs = require("./modules/tabs");
  const modal = require("./modules/modal");

  tabs();
  modal();

});

This is what the console outputs
enter image description here

npx webpack
asset vendor.js 3.78 KiB [compared for emit] (name: main) 1 related asset
./public/js/index.js 183 bytes [built] [code generated]
./public/js/modules/tabs.js 980 bytes [built] [code generated]
./public/js/modules/modal.js 802 bytes [built] [code generated]
webpack 5.91.0 compiled successfully in 44 ms

Nothing works for me when the page loads. the functions do not work, the modal window does not open. And the console in the browser gives an error:

index.js:2 Uncaught ReferenceError: require is not defined
    at index.js:2:16

I tried changing eslint but to no avail