html下一頁，html打印標簽多了一頁,webpack打包多頁應用，如何處理不同html頁面（通過a標簽）之間的跳轉？...

想試著用webpack打包多頁(多個html文件)應用，不同html之間(利用a標簽)跳轉只和項目文件結構路徑相關，但是打包后發現頁面之間跳轉都是404了！

html下一頁，源碼地址：https://gitee.com/qingyun1029/webpack-for-multiple-page-demo

使用方式：

html標簽必須正確嵌套嗎？克隆項目到本地

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

webpack壓縮js代碼、安裝依賴模塊

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,

},

}),

],

}