Реакция: сервер разработки Webpack показывает пустую страницу

Сегодня я пытался создать новый проект React с сервером разработки webpack, но сервер webpack показывает мне только пустую страницу. В инструментах разработчика я вижу, что скрипт bundle.js включен, но тело (компоненты,...) не заполнено моей сборкой реакции.

package.json

    {
    .
    .
    .    
    "devDependencies": {
        "@babel/core": "^7.15.0",
        "@babel/preset-env": "^7.15.0",
        "@babel/preset-react": "^7.14.5",
        "autoprefixer": "^10.3.1",
        "babel-loader": "^8.2.2",
        "css-loader": "^6.2.0",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.3.2",
        "mini-css-extract-plugin": "^2.2.0",
        "postcss": "^8.3.6",
        "postcss-loader": "^6.1.1",
        "style-loader": "^3.2.1",
        "url-loader": "^4.1.1",
        "webpack": "^5.49.0",
        "webpack-cli": "^4.7.2",
        "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "@popperjs/core": "2.9.3",
        "bootstrap": "^5.1.0",
        "bootstrap-icons": "^1.5.0",
        "connected-react-router": "^6.9.1",
        "history": "4.7.2",
        "immer": "^9.0.5",
        "ip": "^1.1.5",
        "popper": "^1.0.1",
        "primeflex": "^3.0.1",
        "primeicons": "^4.1.0",
        "primereact": "^6.5.0",
        "react": "^17.0.2",
        "react-bootstrap": "^1.6.1",
        "react-dom": "^17.0.2",
        "react-helmet": "^6.1.0",
        "react-redux": "^7.2.4",
        "react-router": "4.3.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^4.0.3",
        "react-transition-group": "^4.4.2",
        "redux": "^4.1.1",
        "redux-persist": "^6.0.0",
        "redux-saga": "^1.1.3",
        "reselect": "^4.0.0",
        "sass-loader": "^12.1.0",
        "typescript": "^4.3.5"
    },
    "scripts": {
        "start": "webpack serve --open --hot --mode development",
        "build": "webpack --mode production",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/src/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  mode: 'development',
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom', 'react-router'],
  },
  output: {
    path: path.join(__dirname, './public'),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "css-loader"
          },
        ]
      },
      {
        test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/,
        use: [
          {
          loader: "url-loader",
          options: {
            limit: '100000',
          }
          }
        ]
      },
    ],
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
    port: 4000,
    contentBase: 'static',
  },
  devtool: 'source-map',
};

Мой файл index.html находится в моей папке src. Также есть мой файл index.js.