同一个目录下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,

}),

}

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

webpack 多页面 html,webpack打包多页应用，如何处理不同html页面（通过a标签）之间的跳转？...
想试着用 webpack 打包多页(多个html文件)应用,不同html之间(利用a标签)跳转只和项目文件结构路径相关,但是打包后发现页面之间跳转都是 404 了! 源码地址: https://git ...
html打印标签多了一页,webpack打包多页应用，如何处理不同html页面（通过a标签）之间的跳转？...
想试着用webpack打包多页(多个html文件)应用,不同html之间(利用a标签)跳转只和项目文件结构路径相关,但是打包后发现页面之间跳转都是404了! 源码地址:https://gitee.co ...
在springBoot中使用Mapper类问题_@Mapper_@MapperScan_xml文件跟mapper分开_xml文件跟mapper在同一个目录下
文章目录背景 xml文件跟mapper分开 application.properties 方式一: 主程序中@MapperScan 方式二: 每个接口添加@Mapper 注意点 xml文件跟mapp ...
pycharm 同一个目录下导入py文件时，模块下方出现红色波浪线时如何解决
此解决方案来自于:https://www.cnblogs.com/my-blogs-for-everone/articles/12270938.html 问题如下: pycharm 同一个目录下导入p ...
【DOS】对指定目录下的指定文件类型进行打包
@echo offset package=pack.rar set dirs=LoginServer Launcher GlobalLauncher GameLauncherdel %package% ...
go同一个目录下的go文件里面不能有多个package
原文: https://golang.org/doc/code.html#PackagePaths -------------------------------------------------- ...
python 如何引用同一个目录下的另一个py文件
目录文章目录目录前言正文 1. 方法一代码 2.方法二代码 3.方法三代码 4.方法四代码 5.方法五代码前言在使用python进行编程的过程会遇到各种各样的问题,解决之后,最好 ...
eclipse中多个工程编译到同一个目录下
1.点击link source 2.选择Java(ps:Java文件目录)或者resource(ps:配置文件目录) 3.最后结果,然后使用project中的clean进行编译,就可以把两个工程编 ...
python 目录下的文件_用python把文件夹下的所有文件包括文件夹里面的文件都拷贝到同一个目录下...
比如1文件夹下有2文件夹,2文件夹下有1.txt文件和3文件夹,3文件夹下有2.txt3.txt现在要把1.txt2.txt3.txt全都拷贝到1文件夹下importosimportshutildef ...

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

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

最新文章

热门文章