Vue router not routing with URL paths - vue.js

Question

So I'm working with Vue 3 and Vue Router 4 and I'm having an issue when running my code with webpack-dev-server. Whenever I run my app webpack-dev-server --mode development the landing page looks great and loads everything from my App.vue file. However, whenever I change the route from the base route / to my new component /test it just loads the same exact view as the base route. I've been browsing for hours and can't seem to figure out what's wrong when I'm sure it's a simple fix. Here's the current structure of my directory:
src
components
Homepage.vue
router
index.js
App.vue
index.html
main.js
package.json
webpack.config.js
here is what's inside some of those important files
src/router/index.js
import Vue from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from '../App.vue'
import Homepage from '../components/Homepage.vue'
const routes = [
{ path: '/', component: App },
{ path: '/test', component: Homepage }
]
const router = createRouter({
history: createWebHistory(),
routes: routes
})
export default router
src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App)
.use(router)
.mount('#app');
package.json
{
"name": "web",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "node index.js",
"serve": "webpack-dev-server --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.2.5",
"bootstrap": "^5.2.1",
"express": "^4.18.1",
"uuid": "^9.0.0",
"vue": "^3.2.39",
"vue-router": "^4.0.13"
},
"devDependencies": {
"#babel/core": "^7.19.0",
"#babel/preset-env": "^7.19.0",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"vue-loader": "^17.0.0",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.7.10",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.0",
"webpack-merge": "^5.8.0"
}
}
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './src/main.js',
output: {
publicPath: "/"
},
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
allowedHosts: 'all',
compress: true,
https: true,
historyApiFallback: true
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new VueLoaderPlugin(),
]
};
I tried modifying my routes, installing new packages/libraries, messing with my webpack config file, copying over loads of code from online, but alas, nothing worked.