I followed a tutorial on how to install webpack.config.js to my react-app and I keep getting errors that failed. Honestly, I don't know how to explain what exactly is wrong and what I've done that's incorrect because I just followed the tutorial here: https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9#919f
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: path.join(__dirname, "src", "index.js"),output: { path:path.resolve(__dirname, "dist"),},mode: 'development',module: { rules: [ { test: /\.?js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } }, { test: /\.css$/i, use: ["style-loader", "css-loader"], }, { test: /\.(png|jp(e*)g|svg|gif)$/, use: ['file-loader'], }, { test: /\.svg$/, use: ['@svgr/webpack'], } ]},plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, "src", "index.html"), }),]}package.json
"version": "0.1.0","private": true,"dependencies": {"@testing-library/jest-dom": "^5.16.2","@testing-library/react": "^12.1.3","@testing-library/user-event": "^13.5.0","react": "^17.0.2","react-dom": "^17.0.2","react-scripts": "5.0.0","styled-components": "^5.3.5","web-vitals": "^2.1.4" },"scripts": {"start": "webpack-dev-server --mode development","test": "react-scripts test","eject": "react-scripts eject","dev": "webpack serve","build": "webpack" },"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" ] },"devDependencies": {"@babel/core": "^7.17.9","@babel/preset-env": "^7.16.11","@babel/preset-react": "^7.16.7","babel-loader": "^8.2.5","html-webpack-plugin": "^5.5.0","webpack": "^5.72.0","webpack-cli": "^4.9.2","webpack-dev-server": "^4.8.1" }}