Webpack packages multi-page applications, how to handle the jump between different html pages (through a tag)?

want to try to package multiple pages (multiple html files) with webpack . The jump between different html (using a tag) is only related to the project file structure path, but after packaging, it is found that the jump between pages is 404 !

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

usage:

  1. Clone the project to local
    git clone git@gitee.com:qingyun1029/webpack-for-multiple-page-demo.git
  2. install dependent modules
    npm install
  3. Packaging Code
    npm run build

problem reappears: after packaging, open dist/index.html , click the link on the page, and cannot jump to the about page, and vice versa!

Analysis:

The jump path between

pages is only related to the project file path structure, but after packaging through webpack , the output path must be different from the path written in the source code (usually the source page is placed under the src folder, but you certainly don"t want to have this path after packaging. ), so how should I deal with this relationship?

expectation:

  1. the path of the packaged file can be flexibly customized through webpack ;
  2. can jump between pages normally;

webpack is configured as follows:

"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,
            },
        }),
    ],
}

dist is generally used as the root directory of the web server, so the general jump path should be an absolute path,

<a href="../../about/html/index.html"></a>
Change

to

//webpack
<a href="/about.html"></a>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9cf42-476f3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9cf42-476f3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?