未完待续。。。。

筹备工作，须要的依赖包

// react react-domnpm install react// webpack三剑客npm i --save-dev webpack webpack-dev-server webpack-cli// 面向babel编程，别忘记html模板npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin

css loader

npm install --save-dev style-loader css-loader

webpack.config.js配置

const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {  entry: './src/index.js',  output: {    path: path.join(__dirname, '/dist'),    filename: 'bundlefile.js'  },  module: {    rules: [      {         test: /\.js$/,         exclude: /node_modules/,         use: {           loader: 'babel-loader'         }      },      {         test: /\.css$/,         use: [            'style-loader',            'css-loader'         ]      }   ]  },  plugins: [    new HtmlWebpackPlugin({       template: './src/index.html'    })  ]}

.babelrc文件配置

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

在src文件夹下新建index.js入口文件

在src文件夹下新建html模板文件

<!DOCTYPE html><html><head>  <meta charset="utf-8" />  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>Send it react</title>  <meta name="viewport" content="width=device-width, initial-   scale=1">  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />  <script src="main.js"></script></head><body>  <div id="App"></div></body></html>

新建一个react入口文件
src/js/components

import React from 'react'const App = () => {  return(     <div>        <h1>Hello React</h1>     </div>   )}export default App;

package.json配置如下，版本不肯定要跟我一样
npm run dev/npm run start

  "scripts": {    "dev": "webpack-dev-server --mode development --open",    "build": "webpack --mode production --config ./webpack.config.js --progress --color "  },  "devDependencies": {    "@babel/core": "^7.22.6",    "@babel/plugin-transform-runtime": "^7.22.6",    "@babel/preset-env": "^7.22.6",    "@babel/preset-react": "^7.22.5",    "babel-loader": "^9.1.2",    "css-loader": "^2.1.1",    "html-webpack-plugin": "^5.5.3",    "raw-loader": "^2.0.0",    "style-loader": "^0.23.1",    "webpack": "^5.88.1",    "webpack-cli": "^5.1.4",    "webpack-dev-server": "^4.15.1"  },