Upgrade webpack, getting GET http://localhost:3000/assets/js/customEvent.js net::ERR_ABORTED 404 (Not Found)

I’m updating my react project and after I updated webpack – I’m getting the following error

login:19 GET http://localhost:3000/assets/js/vendor/modernizr.min.js net::ERR_ABORTED 404 (Not Found)
login:20 GET http://localhost:3000/assets/js/customEvent.js net::ERR_ABORTED 404 (Not Found)
login:20 GET http://localhost:3000/assets/js/customEvent.js net::ERR_ABORTED 404 (Not Found)

My index html is:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  <meta name="HandheldFriendly" content="True"> 
  <meta name="author" content="XXX"> 
  <meta name="description">
    <link rel="shortcut icon" href="favicon.ico">
   <!-- VENDOR STYLES--> 
  <link href="/assets/css/vendor/formValidation.css" media="all">
   <link href="/assets/css/vendor/dataTables.bootstrap4.css" media="all"> 
  <link href="/assets/css/vendor/responsive.bootstrap.min.css" media="all">
   <!-- REQUIRED BASE STYLES (INCLUDES BOOTSTRAP 4 FRAMEWORK STYLES)-->
    <script src="/assets/js/vendor/modernizr.min.js" type="text/javascript"></script>
   <script src="/assets/js/customEvent.js" type="text/javascript"></script>
   <base href="/" />
   <title>Title</title>
 </head>
 <body style="-webkit-print-color-adjust:exact;"> 
  <div id="app-root" class="page-wrapper">
   </div> 
</body>
 </html>

My webpack is as follows. I’m using the copy plugin to move assets to /assets, however, when I’m pointing to where they originally were, it still shows an error.
My CSS files were also complaining but when I removed rel="stylesheet".

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const ESLintPlugin = require("eslint-webpack-plugin");

module.exports = {
  output: {
    publicPath: "/",
    filename: "[name].[fullhash].js"
  },
  entry: {
    main: "./src/Index.jsx",
    appcss: "./src/styles/scss/app.scss",
    customcss: "./src/styles/custom/main.scss"
  },
  module: {
    rules: [
      // Javascript and JSX
      {
        test: [/.js$/, /.jsx$/],
        exclude: /node_modules/,
        use: ["babel-loader"],
        resolve: {
          extensions: [".js", ".jsx"]
        }
      },
      // SASS scss files
      {
        test: [/.css$/, /.scss$/],
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      // Fonts
      {
        test: /.(woff2?|gif|ttf|otf|eot|svg|png|jpg)$/,
        type: "asset/resource",
        // generator: {
        //   filename: "fonts/[name][ext][query]"
        // }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      APP_VERSION: JSON.stringify(process.env.npm_package_version)
    }),
    new CopyPlugin({
      patterns: [
        { from: path.resolve(__dirname, "src/assets"), to: path.resolve(__dirname, "assets") },
        { from: path.resolve(__dirname, "src/styles/custom/assets"), to: path.resolve(__dirname, "assets/custom") }
      ]
    }),
    new CaseSensitivePathsPlugin(),
    // Generates HTML file output with the bundles referenced in <script> and <link> elements
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new ESLintPlugin({
      extensions: ["js", "jsx"],
    })
  ],
  resolve: {
    alias: {
      app: path.join(__dirname, "src"),
      "app-api": path.join(__dirname, "src/api"),
      "app-version": path.join(__dirname, "src/config/version.js")
    }
  }
};

Any help appreciated.