Как настроить веб-пакет так, чтобы он добавлял только файлы сценариев во время выполнения и удалял ранее добавленные файлы в связанном файле «bundle.js».

Question

Я новичок в веб-пакете и стеке oveflow. в настоящее время я использую веб-пакет для объединения файлов/модулей CSS и сценариев в один файл «bundle.js». Вот фрагмент кода (вызывающий беспокойство) в файле index.js.

      import loadPage from "./load-page.js";
// header element is containing three buttons home, menu, contact...
const header = document.querySelector(".header");
// Listen to the header buttons to load corresponding pages upon click of corresponding button
header.addEventListener("click", (event) => {
     // Home button is clicked...
     if (event.target === header.children[0]) {
          loadPage("home-page")
     };
     else if (event.target === header.children[1]) {
          loadPage("menu-page");
     } else if (event.target === header.children[2]) {
          loadPage("contact-page");
     }
});

Вот функция loadPage в файле «./load-page.js»:

      function loadPage(tab) {
     if (tab === "home-page") {
          return import("./home-page.js");
     } else if (tab === "menu-page") {
          return import("./menu-page.js");
     } else if (tab === "contact-page") {
          return import("./contact-page.js");
     }
}

export default loadPage;

вот файл webpack.config.js:

      const htmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
     mode: "development",
     entry: {
          index: "./src/script-files/index.js",
     },
     devtool: "inline-source-map",
     devServer: {
          static: "./dist",
          hot: true,
     },
     plugins: [
          new htmlWebpackPlugin({
               template: "./src/index.html",
          }),
     ],
     output: {
          filename: "bundle.js",
          path: path.resolve(__dirname, "dist"),
          clean: true,
     },
     module: {
          rules: [
               {
                    test: /\.css$/i,
                    use: ["style-loader", "css-loader"],
                    
               },
          ],
     },
};

Когда я нажимаю кнопку «Домой», он загружает правильную домашнюю страницу, как и остальные страницы... Но веб-пакет также сохраняет предыдущие файлы сценариев в файле «./bundle.js», которые были импортированы при нажатии кнопки «Домой», кнопки меню и т. д. кнопки. Но я хочу, чтобы веб-пакет объединял только один файл сценария, который импортируется при нажатии кнопки во время выполнения и должен отбрасывать ранее добавленные файлы при нажатии других кнопок. Если это невозможно, то, по крайней мере, следует добавлять импортированные файлы сценариев в отдельные теги в файле «index.html», а не в один файл «bundle.js», чтобы я мог удалить их перед внедрением нового файла сценария. Любая помощь, пожалуйста...