How to Native implementation of second-level routing by webpack + js

took over a small project. Instead of using vue, I built a small project with webpack.
I didn"t think too much about it at first, but then there were more pages, so it was obvious that there was a need for first-level routing and second-level routing.
because it is not clear how to implement secondary routing with vue,.
ask your predecessors how to use js to simply implement second-level routing.

const htmlWebpackPlugin = require("html-webpack-plugin")
const extractTextWebpackPlugin = require("extract-text-webpack-plugin")
const path = require("path")

// 
const pages = [
    {name: "index"},
    {name: "collections"},
    {name: "projects"},
    {name: "page4"},
    {name: "page5"},
    {name: "page6"},
    {name: "page7"},
    {name: "page8"},
    {name: "page9"},
    {name: "page10"},
    {name: "page11"}
]

// webpack
const entry = path.join(__dirname, "/src/main.js")

// webpack
const output = {
    path: path.join(__dirname, "/public"),
    filename: "[name].js"
}

// 
const devServer = {
    contentBase: path.join(__dirname, "/public"),
    historyApiFallback: true,
    inline: true
}

const _module = {
    rules: [
        {
            test: /\.html$/,
            use: {
                loader: "html-loader"
            }
        },
        {
            test: /(\.jsx|\.js)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            },
        },
        {
            test: /(\.jpg|\.png|\.gif|.jpeg)$/,
            use: [
                {
                    loader: "url-loader",
                    options: {
                        limit: 12000,
                        outputPath: "images",
                        name: "[name].[hash].[ext]"
                    }
                }
            ]
        },
        {
            test: /\.scss$/,
            use: extractTextWebpackPlugin.extract({
                fallback: "style-loader",
                use: [
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            })
        },
        {
            test: /\.(otf)|(woff)|(eot)|(ttf)$/,
            use: [
                {
                    loader: "url-loader",
                    options: {
                        limit: 100000,
                        name: "[hash:8].[name].[ext]",
                        outputPath: "images"
                    }
                }
            ]
        }
    ]
}

// 
const plugins = pages.map(({name}) => new htmlWebpackPlugin({
    filename: path.join(__dirname, `/public/${name}.html`),
    template: path.join(__dirname, `/src/template/${name}.temp.html`)
}))
plugins.push(new extractTextWebpackPlugin("styles.css"))

module.exports = {
    entry,
    output,
    devServer,
    module: _module,
    plugins
}
The resource directory packaged by

webpack looks like this
clipboard.png

Mar.21,2021

now that there is front-end routing, it is likely to be a single-page application, and you have to solve the problem of page module replacement first.

then it's simple, using history or hash to implement routing. Click the link to replace the url, to replace the corresponding module.

first level, second level, one truth

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-1b34e69-2ac95.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-1b34e69-2ac95.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?