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:

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