Навигация по многостраничному веб-проекту

Question

У меня есть базовая конфигурация веб-пакета с двумя точками входа для двух html-страниц. Обе страницы теперь доступны. Индекс на https://localhost:3000/ и диалоговое окно на https://localhost:3000/dialog.html. Теперь я хочу программно перейти от index.js к dialog.html, например, используя window.location.href = './src/dialog/dialog.html', если нажата кнопка. Как я могу убедиться, что этот путь указывает на общедоступное расположение (dist) файла dialog.html, созданного html-webpack-plugin?

Полагаю, если я настрою загрузчик файлов для html и импортирую файл в index.js, он поместит весь html-файл в index.bundle.js, что не имеет смысла, если я просто хочу указать путь к расположение файла hmtl.

Какой здесь правильный подход?

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    entry: {
        index: ['@babel/polyfill', './src/index.js'],
        dialog: ['@babel/polyfill', './src/dialog/dialog.js']
    },
    plugins: [
        //new BundleAnalyzerPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            hash: true,
            template: './src/index.html',
            filename: './index.html',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            hash: true,
            template: './src/dialog/dialog.html',
            filename: './dialog.html',
            chunks: ['dialog']
        })
    ],
    output: {
        filename: '[name].bundle.[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            fallback: 'file-loader'
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            disable: true
                        },
                    },
                ],
            }
        ]
    }
};