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