webpack打包多页应用，如何处理不同html页面（通过a标签）之间的跳转？

Question

想试着用webpack打包多页（多个html文件）应用，不同html之间（利用a标签）跳转只和项目文件结构路径相关，但是打包后发现页面之间跳转都是404了！

源码地址：https://gitee.com/qingyun1029/webpack-for-multiple-page-demo

使用方式：

1. 克隆项目到本地
   git clone git@gitee.com:qingyun1029/webpack-for-multiple-page-demo.git
2. 安装依赖模块
   npm install
3. 打包代码
   npm run build

问题重现：打包后，打开dist/index.html，点击页面上的链接，无法跳转到about页面；反之亦然！

分析：

页面之间的跳转路径唯一相关的是项目文件路径结构，但是通过webpack打包后，输出的路径肯定和源码中写的路径不一样的（通常源码页面放在src文件夹下面，但是打包后肯定不希望有这层路径吧！），所以我该怎么处理这一层关系呢？

期望：

1. 通过webpack打包后的文件路径能够比较灵活的自定义；
2. 页面之间能够正常跳转；

webpack配置如下：

'use strict'
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'production',
    entry: {
        home: './src/pages/home/index.js',
        about: './src/pages/about/index.js',
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].[chunkhash].js',
    },
    resolve: {
        extensions: ['.js', '.json'],
    },
    module: {

    },
    plugins: [
        new HtmlWebpackPlugin({
            chunks: ['home'],
            filename: 'home.html',
            template: 'src/pages/home/html/index.html',
            inject: true,
            minify: {
              removeComments: true,
              collapseWhitespace: true,
            },
        }),
        new HtmlWebpackPlugin({
            chunks: ['about'],
            filename: 'about.html',
            template: 'src/pages/about/html/index.html',
            inject: true,
            minify: {
              removeComments: true,
              collapseWhitespace: true,
            },
        }),
    ],
}

Answer 1

dist一般都作为web服务器的root目录，所以一般的跳转路径应该是绝对路径,

<a href="../../about/html/index.html">团队介绍</a>

改成

//这个主要根据你的webpack配置
<a href="/about.html">团队介绍</a>