webpack如何将vue3单页面应用改造成多页面应用

entry: {
        index: path.resolve(__dirname, './src/pages/index/index.js'),
        page1: path.resolve(__dirname, './src/pages/page1/page1.js')
    },
    output: {
        path: path.resolve(__dirname, 'dist'), // 打包出口
        filename: '[name].js', // 打包完的静态资源文件名
        clean: true,//每次打包都会删除dist里面旧的内容
    },

plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './templates/index.html'), // 我们要使用的 html 模板地址
            filename: 'index.html', // 打包后输出的文件名
            title: 'index页面',
            chunks: ["index"]
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './templates/page1.html'), // 我们要使用的 html 模板地址
            filename: 'page1.html', // 打包后输出的文件名
            title: 'page1页面',
            chunks: ["page1"]
        }),
        new VueLoaderPlugin() //vue-loader插件
    ],

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>
<body>
    <div id="root"></div>
</body>

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
    state: () => {
        return { userName: "黄烽" }
    },
    // 也可以这样定义
    // state: () => ({ count: 0 })
    actions: {
        changeName () {
            this.userName = "gss"
        }
    },
})

<template>
    <div class="msg">this msg is from page index
        <span>this is from span</span><br />
        <span>{{ "userName: " + user.userName }}</span>
        <button @click="change">跳转</button>
    </div>
</template>
<script setup>
import { onMounted } from 'vue';
import { useUserStore } from "../../../pinia/userInfor.js"
const user = useUserStore()
const testFunction = (msg) => {
    alert(msg)
}
onMounted(() => {
    testFunction("hhhh")
})
const change = () => {
    window.location.href = "./page1.html"
}
</script>
<style scoped lang="scss">
.msg {
    color: red;
    span {
        color: green;
    }
}
</style>

<template>
    <div class="msg">this msg is from page1
        <span>this is from span</span><br />
        <span>{{ "userName: " + user.userName }}</span>
        <button @click="change">改变用户姓名</button>
    </div>
</template>
<script setup>
import { onMounted } from 'vue';
import { useUserStore } from "../../../pinia/userInfor.js"
const user = useUserStore()
const change = () => {
    user.changeName()
}
const testFunction = (msg) => {
    alert(msg)
}
onMounted(() => {
    testFunction("hhhh")
})
</script>
<style scoped lang="scss">
.msg {
    color: red;
    span {
        color: green;
    }
}
</style>