react教程，如何搭建自己的webpack+react环境？

npm i webpack webpack-cli webpack-dev-server --save-dev
npm i style-loader mini-css-extract-plugin html-webpack-plugin css-loader --save-dev
npm i react react-dom react-redux @reduxjs/toolkit --save

npm i babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

{
    "presets": [
        "@babel/preset-env",
        ["@babel/preset-react", {"runtime": "automatic"}]
    ] 
}

module.exports = {
    //...
    module: {
        rules: [
            { 
                test: /\.js|jsx$/, 
                use: 'babel-loader', 
                exclude: /node_modules/,
            },
            //...
        ]
    }
    //...
}

import React from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
function Counter(props) {
    return (
      <div>
        react test by {props.name}
      </div>
    );
  }
root.render(
  <React.StrictMode>
      <Counter name="sunan大叔" />
  </React.StrictMode>
);