How to remove source maps from webpack 5 @React.js @webpack 5

Question

The common solution for removing source maps from a CRA build is to add "GENERATE_SOURCEMAPS=false react-scripts build" in package.json build scripts and/or "GENERATE_SOURCEMAPS=false" in the CRA .env file. However, I do not use Create React App. Therefore, "react-scripts build" is not recognized as an internal command, my .env file has no effect on the bundled code, and simply adding "GENERATE_SOURCEMAPS=false" to my build scripts does nothing. I would like to remove source maps from the webpack bundle. Here is my package.json.

{
   "name": "reactboilerplate",
   "version": "1.0.0",
   "description": "boilerplate code",
   "main": "index.js",
   "presets": 
    [
       "@babel/preset-env",
       "@babel/preset-react"
    ],
  "scripts": 
    {
      "build": "cross-env GENERATE_SOURCEMAP=false webpack --watch",
      "start": "webpack serve",
      "build-prod": "weback -p",
      "winBuild": "set \"GENERATE_SOURCEMAP=false\" && build"
    },
 "keywords": [],
 "author": "ziggy",
 "license": "NONE",
 "devDependencies": 
   {
     "@babel/core": "^7.16.7",
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.5.1",
     "file-loader": "^6.2.0",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "style-loader": "^3.3.1",
     "webpack": "^5.66.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.7.3"
  },
"dependencies": 
 {
    "@aws-amplify/ui-react": "^2.1.9",
    "aws-amplify": "^4.3.12",
    "aws-amplify-react": "^5.1.9",
    "bootstrap": "^5.1.3",
    "pandadoc-node-client": "^4.1.0",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.1",
    "react-dom": "^17.0.2",
    "typewriter-effect": "^2.18.2"

} }

Here is my webpack.config.js

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

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: 
    {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    resolve: 
    {
        modules: [path.join(__dirname, 'src'), 'node_modules'],
        alias: { react: path.join(__dirname, 'node_modules', 'react') }
    },
    plugins:
        [
            new NodePolyfillPlugin(),
            new HtmlWebpackPlugin({ template: './src/index.html' }),
        ],
    module: 
    {
        rules: [
            {
                test: /\.css/i,
                use: ['style-loader', 'css-loader']

            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:
                {
                    loader: "babel-loader",
                    options:
                    {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
            {
                test: /\.(png|mp4)$/i,
                type: "asset/resource"
            },
            {
                test: /\.txt$/i,
                type: 'asset/source'
            },
            {
                test: /\.(woff|woff2|ttf)$/i,
                type: "asset/resource"
            },
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.(mov|mp4)$/,
                use:
                    [
                        {
                            loader: 'file-loader',
                            options:
                            {
                                name: '[name].[ext]'
                            }
                        }
                    ]
            },
            {
                test: /\.m?js/,
                resolve:
                {
                    fullySpecified: false
                }
            },

        ]
    }
}