首先需要 在package.json配置基础信息：

 "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "babel-loader": " 8.2.1",
    "node-sass": "^5.0.0",
    "css-loader": "^5.0.1",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "3.11.2",
    "webpack-merge": "^5.8.0",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
    "open-browser-webpack4-plugin": "^1.0.0"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }

第二步：需要建立相关目录：

│  .babelrc
│  package.json
│  
├─config
│      webpack.base.config.js
│      webpack.dev.config.js
│      webpack.prod.config.js
│      
└─src
        App.jsx
        index.html
        index.jsx
        style.scss

1. config配置webpack打包文件
2. src 放置代码文件
3. package.json 配置文件
4. .babelrc babel的相关配置

.babelrc

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

package.json

{
  "name": "react-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack server --progress --config config/webpack.dev.config.js",
    "build": "webpack  --progress --config config/webpack.prod.config.js",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "babel-loader": " 8.2.1",
    "node-sass": "^5.0.0",
    "css-loader": "^5.0.1",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "3.11.2",
    "webpack-merge": "^5.8.0",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
    "open-browser-webpack4-plugin": "^1.0.0"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

webpack.base.config.js

const path =require("path");
const webpackBaseConfig={
    entry:path.join(__dirname,'../src/index.jsx'),
    output:{
        path:path.join(__dirname,'../dist'),
        filename:'[name].[hash:10].js'
    },
    resolve:{
        extensions:['.js','.jsx']
    },
    module:{
        rules:[ {
            test:/.js[x]/,
            use:'babel-loader'
        },{
         test:'/.(sc|c)ss/',
         use:'style-loader'   
        }]
    }
}
module.exports=webpackBaseConfig;

webpack.dev.config.js

const path = require("path");
const webpack = require("webpack");
const { merge } = require("webpack-merge");


const OpenBrowserPlugin = require("open-browser-webpack4-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpackBaseConfig = require("./webpack.base.config");
const port = 8080;
const webpackConfigDev = {
  mode: "development",
  plugins: [
    new webpack.HotModuleReplacementPlugin(), //热更新
    new HtmlWebpackPlugin({
      inject: "body",
      title: "React APP",
      filename: "index.html",
      template: path.join(__dirname, "../src/index.html"),
    }),
    new OpenBrowserPlugin({
      url: `http://localhost:`+port+`/#/`,
    }),
  ],
  devtool: "eval-source-map",
};
module.exports = merge(webpackBaseConfig, webpackConfigDev);

webpack.prod.config.js

const path = require("path");
const { merge } = require("webpack-merge");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpackBaseConfig = require("./webpack.base.config");


const webpackConfigProd = {
  mode: "production",
  plugins: [
    new CleanWebpackPlugin({
      protectWebpackAssets: true,
    }),
    new HtmlWebpackPlugin({
      inject: "body",
      title: "React APP",
      filename: "index.html",
      template: path.join(__dirname, "../src/index.html"),
    }),
  ],
};
module.exports = merge(webpackBaseConfig, webpackConfigProd);

App.jsx

import React,{Component} from "react";
class App extends Component{
    render (){
        return <div>hello,rect</div>
    }
}
export default App;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

index.jsx

import React from "react";
import  ReactDOM  from "react-dom";
import App from "./App";
import "./style.scss";
ReactDOM.render(<App />, document.getElementById("root"));

style.scss

这样运行 npm i

npm run dev

npm run build 就很轻松了