Before implementing webpack, my vue routing was functioning properly. However, I encountered several loader issues and decided to use webpack. After setting up webpack, the main page loads correctly, but all of my routes now result in a 404 error. I have already attempted various solutions that were commented out, but none worked. I suspect there may be a problem with my webpack configuration file, but I am unable to identify it. Any suggestions or assistance would be greatly appreciated. Thank you for your time.

App.vue

<template>
  <div class="base-app">
    <div class="mapbox" id="mapbox">
      <router-view />
    </div>
  </div>
</template>

<script>
// import Login from './components/login.vue';
// import Tract from './components/tract.vue';

export default {
  name: "App",
  // components: {
  //   Login,
  //   Tract
  // }
};
</script>

router.js

import { createWebHistory, createRouter } from "vue-router";
import Index from "./components/index.vue";
import Login from "./components/login.vue";
import Tract from "./components/tract.vue";

const routes =  [
  {
    path: "/",
    component: Index
  },
  {
    path: "/login",
    component: Login
  },
  {
    path: "/tract/:id",
    component: Tract
  }
];


const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

main.js

import { createApp } from 'vue';
import App from './App.vue';
// import login from './components/login.vue';
// import tract from './components/tract.vue';
import router from './router.js';

import "./assets/styles/normalize.css";
import "./assets/styles/app.css"; 

const app = createApp(App);
// app.component('login', login);
// app.component('tract', tract);
app.use(router);
app.mount('#app');

webpack.config.cjs

const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");

module.exports = {
  entry: {
    main: "./src/main.js",
  },
  output: {
    filename: 'main.bundle.js',
    path: path.resolve(__dirname, 'dist/')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.s?css$/,
        use: [
          "style-loader",
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false,
            },
          },
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: () => [autoprefixer()],
              }
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      }
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash:8].css",
      chunkFilename: "[name].[contenthash:8].css",
    }),
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
      favicon: "./public/favicon.ico",
    }),
  ],
  resolve: {
    extensions: [ '.tsx', '.ts', '.js', '.vue' ],
    alias: {
        'vue': '@vue/runtime-dom'
    }
  },
  devtool: 'source-map'
};

vue.config.cjs

module.exports = {
  devServer: {
    disableHostCheck: true,
    devMiddleware: {
      writeToDisk: false
    }
  }
}

package.json

{
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "startdev": "webpack-dev-server --mode development --config ./webpack.config.cjs",
    "start": "NODE_ENV=production webpack --config ./webpack.config.cjs"
  },
  "dependencies": {
    "@aws-amplify/ui-vue": "^3.1.20",
    "aws-amplify": "^5.3.3",
    "axios": "^0.22.0",
    "bootstrap": "4.6.0",
    "chart.js": "^4.4.0",
    "core-js": "^3.34.0",
    "jquery": "^3.6.0",
    "mapbox-gl": "^2.6.0",
    "popper.js": "^1.16.1",
    "postcss-loader": "^7.3.3",
    "vue": "^3.0.0",
    "vue-chartjs": "^5.2.0",
    "vue-router": "4"
  },
  "devDependencies": {
    "@babel/core": "^7.23.5",
    "@babel/preset-env": "^7.23.5",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "autoprefixer": "^10.4.16",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.8.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.4",
    "mini-css-extract-plugin": "^2.7.6",
    "postcss": "^8.4.32",
    "sass": "^1.69.5",
    "sass-loader": "^13.3.2",
    "source-map-loader": "^4.0.1",
    "style-loader": "^3.3.3",
    "vue-loader": "^17.3.1",
    "vue-template-compiler": "^2.7.15",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
}