webpack 多页面 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,
},
}),
],
}
總結
以上是生活随笔為你收集整理的webpack 多页面 html,webpack打包多页应用，如何处理不同html页面（通过a标签）之间的跳转？...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： font HTML语言,HTML fon
- 下一篇： html绘制头像原样教程,CSS实例教程