webpack + js如何原生實現(xiàn)二級路由

接手了一個小項目，想著就不用vue了，自己用webpack搭起來了小項目。
剛開始頁面量不多我也沒做過多考慮，后來頁面變多了，明顯得有了一級路由和二級路由的需求。
因為平時都用vue，如何實現(xiàn)二級路由實在不清楚。
求教各位前輩如何用js簡單得實現(xiàn)二級路由。

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"
}

// 配置服務(wù)器
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
}

webpack打包出來的資源目錄是這樣的