绑定webpack后，如何更改Javascript创建页面的href？

我试图在项目中使用webpack，但在动态创建页面时遇到问题。 我为页眉、页脚和另一个页面动态创建了三个模块

根据header.js中的示例，我有一个带有链接的导航栏，如“/src/html/about.html”

当我从src文件夹运行live服务器时，我没有遇到任何问题。当我运行webpack并将所有内容打包到dist文件夹时，问题就出现了。.js文件中的路径无法更改，my index.html无法正确加载它们

header.js看起来像这样，但更长，例如navbarLogo.href：

const displayHeader = () => {
const navbar = document.createElement('div');
    navbar.classList.add('navbar');
    centeredContainer.appendChild(navbar);

const navbarLogo = document.createElement('a');
    navbarLogo.classList.add('navbar-logo');
    navbarLogo.href = "/src/index.html";
    navbar.appendChild(navbarLogo);
}

export default displayHeader;

---

您知道如何处理这些类型的路径问题吗？

请添加一些代码@马杜奈尔：哦，对不起，现在结束了！