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

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

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

使用方式：

克隆项目到本地

git clone git@gitee.com:qingyun1029/webpack-for-multiple-page-demo.git

安装依赖模块

npm install

打包代码

npm run build

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

分析：

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

期望：

通过webpack打包后的文件路径能够比较灵活的自定义；

页面之间能够正常跳转；

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,

},

}),

],

}