How to remove source maps from webpack 5 #React.js #webpack 5 - reactjs

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
}
},
]
}
}