想試著用

webpack

打包多頁(yè)(多個(gè)html文件)應(yīng)用，不同html之間(利用a標(biāo)簽)跳轉(zhuǎn)只和項(xiàng)目文件結(jié)構(gòu)路徑相關(guān)，但是打包后發(fā)現(xiàn)頁(yè)面之間跳轉(zhuǎn)都是

404

了！

源碼地址：

https://gitee.com/qingyun1029/webpack-for-multiple-page-demo

使用方式：

克隆項(xiàng)目到本地

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

安裝依賴模塊

npm install

打包代碼

npm run build

問(wèn)題重現(xiàn)：打包后，打開

dist/index.html

，點(diǎn)擊頁(yè)面上的鏈接，無(wú)法跳轉(zhuǎn)到

about

頁(yè)面；反之亦然！

分析：

頁(yè)面之間的跳轉(zhuǎn)路徑唯一相關(guān)的是項(xiàng)目文件路徑結(jié)構(gòu)，但是通過(guò)

webpack

打包后，輸出的路徑肯定和源碼中寫的路徑不一樣的(通常源碼頁(yè)面放在

src

文件夾下面，但是打包后肯定不希望有這層路徑吧！)，所以我該怎么處理這一層關(guān)系呢？

期望：

通過(guò)

webpack

打包后的文件路徑能夠比較靈活的自定義；

頁(yè)面之間能夠正常跳轉(zhuǎn)；

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,

},

}),

],

}

總結(jié)

以上是生活随笔為你收集整理的webpack 多页面 html,webpack打包多页应用，如何处理不同html页面（通过a标签）之间的跳转？...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。