ReactJS - webpack 5 bundle.js is not generating in dist folder

I have to upgrade reactjs project from react 15 to 18+ with supporting node 16+

I made the changes in package.json and webpacl.common.js as below but while running it with using npm run start than it's showing error that bundle.js not found on browser. package.json

{
  "name": "new-client-widget",
  "version": "0.1.0",
  "main": "app.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js",
    "build": "NODE_ENV='production' webpack --config webpack.prod.js",
    "test": "jest --no-cache --watch"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.14.8",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-react": "^7.14.5",
    "@open-wc/webpack-import-meta-loader": "^0.4.7",
    "babel-loader": "^8.2.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^6.8.1",
    "empty-folder": "^2.0.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "identity-obj-proxy": "^3.0.0",
    "ify-loader": "^1.1.0",
    "jest": "^29.6.1",
    "jest-enzyme": "^4.2.0",
    "jest-html-reporter": "^2.8.0",
    "node-sass": "^9.0.0",
    "react-test-renderer": "^18.2.0",
    "redux-devtools-extension": "^2.13.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.17.0",
    "svg-url-loader": "^8.0.0",
    "webpack": "^5.88.2",
    "webpack-bundle-analyzer": "^4.9.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "webpack-merge": "^4.1.1",
    "webpack-shell-plugin-next": "^2.3.1"
  },
  "dependencies": {
    "@babel/preset-env": "^7.22.9",
    "@babel/preset-react": "^7.22.5",
    "ajv": "^6.11.0",
    "bootstrap": "^3.3.7",
    "chartiq": "file:CIQ_Packages/chartiq-8.9.1.tgz",
    "crypto-js": "^3.1.9-1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.7",
    "faye": "^1.2.4",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^5.5.3",
    "js-cookie": "^2.2.0",
    "material-ui": "^0.15.0",
    "moment": "^2.18.1",
    "prop-types": "^15.5.10",
    "react": "^18.2.0",
    "react-bootstrap": "^0.31.2",
    "react-data-grid": "^3.0.11",
    "react-data-grid-addons": "^3.0.11",
    "react-dom": "^18.2.0",
    "react-paginate": "^5.0.0",
    "react-plotly.js": "^2.1.0",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.2.2",
    "react-select": "^2.4.4",
    "react-tabs": "^2.1.1",
    "react-tooltip": "^3.5.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "remove": "^0.1.5",
    "short-uuid": "^2.3.4",
    "superagent": "^3.8.1",
    "url-loader": "^4.1.1"
  }
}

webpack.common.js

var path = require("path");
var webpack = require("webpack");

module.exports = {
  mode: "development",
  entry: {
    bundle: path.join(__dirname, "src", "js/main.js"),
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/dist",
  },
  devServer: {
    host: "0.0.0.0",
    port: 8080,
  },
  resolve: {
    extensions: [".js", ".jsx", ".json"],
  },
  stats: {
    colors: true,
    reasons: true,
    chunks: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", "@babel/preset-env"],
          },
        },
      },
      {
        test: /\.jsx$/,
        use: "ify-loader",
      },
      {
        test: /\.svg$/,
        use: "svg-url-loader",
      },
      {
        test: /\.scss$/,
        use: "sass-loader",
      },

      {
        test: /\.css$/,
        use: "style-loader!css-loader",
      },
      {
        test: /\.png$/,
        use: "url-loader?limit=100000",
      },
      {
        test: /\.jpg$/,
        use: "file-loader",
      },
      {
        test: /\.html$/,
        use: "file-loader?name=client_widget/[name].[ext]",
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        use: "file-loader?name=client_widget/fonts/[name].[ext]",
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: "file-loader?name=client_widget/fonts/[name].[ext]",
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: "file-loader?name=client_widget/fonts/[name].[ext]",
      },
    ],
  },
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /\.\/native/,
      contextRegExp: /\/pg\//,
    }),
  ],
};

can anyone please suggest what I'm missing

from ReactJS - webpack 5 bundle.js is not generating in dist folder