一、创建一个package.json文件

npm init -y

二、安装webpack需要的配置

npm install webpack -D
npm install webpack-cli -D
npm install webpack-dev-server --save-dev

三、安装babel

npm i babel-loader @babel/core @babel/preset-react -D
//TS
npm i babel-loader @babel/core @babel/preset-react @babel/preset-typescript -D 

四、安装React

npm i react react-dom -S 
npm i @types/react @types/react-dom -D 

五、创建一个webpack.config.js文件并配置，配置如下。

在src下创建一个app.js和index.html文件

我们需要一个html-webpack-plugin，安装

npm install html-webpack-plugin

基本webpack配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  //入口
  entry: {
    main: "./src/app.js",
  },
  //出口
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        //预设执行处理
        options: {
          presets: ["@babel/preset-react"],
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html"),
    }),
  ],
  devServer: {
    port: 888,
    hot: true,
    open: true,
  },
};

六、配置app.js

import React from "react";
import ReactDOM from "react-dom";
function App() {
  return <div>这是react</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));

七、配置package.json

  "scripts": {
    "start": "webpack-dev-server"
  },

八、npm run start就可以运行啦