How do I create an entry point for my webpack.config.js in Angualr js

Question

I am trying to upgrade an Angular js project from using grunt to making use of webpack. I created a webpack configuration and tried to run the application with webpack. I don't get any errors durig the building of the application but on running the application I do get an error and it displays a blank screen.

Firstly, I installed the necessary packages like webpack, webpack-cli, and webpack-dev-server using node version 18.13.0. I then created a webpack configuration file, after which I was able to build and run the application. I read an article See How Easily You Can Upgrade To Webpack by Yazan Aabed. This helped a lot but I couldn't understand how he did everything clearly as I am still new to Angular js.

On running the project, I expected that it starts up but instead it gave me an error and displays a blank screen. I suspected the issue might be coming from the project structure not having an entry point. The whole project depends on one source which is the window. Webpack needs an entry point to start with and an output point to end with. If this is the case, how can I create an entry point for the project or fix the entire issue of making the webpack configuration work?

Below is my webpack configuration file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './app/scripts/app.js',
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './app/index.html',
      filename: 'index.html',
    }),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'app/styles/snoobi.css',
          to: 'styles/snoobi.css',
        },
      ],
    }),
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css',
    }),
  ],
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

The error message displayed on the screen: