webpack [Uncaught ReferenceError: require is not defined]

Всем привет. Недавно начал изучать webpack и столкнулся вот с такой проблемой. У меня есть конфигурационный файл 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: {},
};

В качестве сервера я использую express.js. у меня есть главный файл index.js и два файла где логику я разбил на модули: 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;

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

Я пытаюсь в главном файле index.js через require принять эти две функции. В консоли показывает без ошибок. Вот файл index.js

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

  tabs();
  modal();

});

Вот, что выдает консоль

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

При загрузке страницы у меня ничего не работает. функции не работают, модальное окно не открывается. А консоль в браузере выдает ошибку:

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

Расположение файлов