Webpack环境下JS跳转新HTML页面失败求助

尝试添加按钮跳转至项目内的app.html页面，已在Webpack配置中添加html-loader处理a标签的href属性，但点击按钮后跳转到about:blank#blocked，查看页面元素发现a标签的href被填充为app.html的原始代码，而非dist目录下生成的app.html文件路径。

Webpack关键配置片段：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: {
        home: "./src/index.js",
        app: "./src/pages/app.js",
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: "html-loader",
                options: {
                    sources: {
                        list: [
                            "...",
                            {
                                tag: "a",
                                attribute: "href",
                                type: "src",
                            },
                        ],
                    },
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "src/views/index.html",
            chunks: ["home"],
        }),
        new HtmlWebpackPlugin({
            filename: "app.html",
            template: "src/views/app.html",
            chunks: ["app"],
        }),
    ],
};

当前错误代码：

// home.js中的导入语句
import appPage from "html-loader!../views/app.html";

// 注入a标签的代码
const startButton = document.createElement("a");
startButton.id = "start-button";
startButton.innerText = "Get Started";
startButton.href = loginPage; // 存在变量名笔误，且逻辑错误

1. html-loader的作用是将HTML文件编译为字符串导出，因此appPage变量存储的是app.html的完整代码文本，而非文件访问路径。
2. 代码存在变量名笔误：导入的是appPage，但赋值给href的是未定义的loginPage。
3. 误解了html-loader的用途：它用于处理HTML模板内的资源引用（如替换img的src、a的href为Webpack打包后的资源路径），而非获取生成后HTML文件的访问路径。

方案1：直接使用相对路径（最简有效） #

无需导入HTML文件，直接将a标签的href设置为app.html即可——HtmlWebpackPlugin已在dist目录生成该文件，devServer会自动映射路径：

const startButton = document.createElement("a");
startButton.id = "start-button";
startButton.innerText = "Get Started";
startButton.href = "app.html"; // 直接使用同级相对路径
document.body.appendChild(startButton); // 务必将按钮添加到DOM中

方案2：简化html-loader配置（若无需处理模板内a标签） #

如果HTML模板中没有需要Webpack打包处理的本地资源引用，可移除html-loader中关于a标签的配置，保留默认规则即可：

{
    test: /\.html$/i,
    loader: "html-loader",
    // 移除sources内的a标签自定义配置，使用默认处理逻辑
}

注意事项 #

• 开发环境下，devServer的historyApiFallback: true配置不会影响静态页面访问；若为静态多页项目，可考虑将其设为false以避免潜在冲突。
• 生产环境打包后，dist目录下的index.html与app.html为同级文件，相对路径app.html依然有效。

内容的提问来源于stack exchange，提问作者Kagune