新建目录react-node-demo

react-node-demo下新建package.json文件

终端初始化，执行命令npm init

安装webpack相关依赖webpack webpack-cli webpack-dev-serve

npm i webpack webpack-cli webpack-dev-serve -save-dev

安装react依赖react react-dom

npm i react react-dom

项目下新建src目录

在src目录下新建App.jsx main.js index.html文件

App.jsx文件

import React from "react"export default function App(props){return(
hello
)
}

main.js文件

import React from "react";
import ReactDOM from 'react-dom/client';import App from './App.jsx';ReactDOM.createRoot(document.getElementById('app')
).render();

index.html文件

package.json文件配置

{"name": "react-node-demo","version": "1.0.0","description": "","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack-dev-server --hot --open --mode development","build": "webpack --config webpack.config.js"},"author": "","license": "ISC","dependencies": {"react": "^18.2.0","react-dom": "^18.2.0"},"devDependencies": {"@babel/core": "^7.20.2","@babel/preset-env": "^7.20.2","@babel/preset-react": "^7.18.6","babel-loader": "^9.1.0","cross-env": "^7.0.3","html-loader": "^4.2.0","html-webpack-plugin": "^5.5.0","webpack": "^5.75.0","webpack-cli": "^5.0.0","webpack-dev-server": "^4.11.1"}
}

webpack.config.js文件配置

const path = require('path');
const  HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {entry:  path.resolve(__dirname,'./src/main.js'), //入口文件mode: 'development',output: {filename: 'bundle.js', //出口文件path: path.resolve(__dirname, 'dist')//打包输出目录},devServer: {port: 9000,//指定端口},module: {rules: [{test: /\.(js|jsx)$/,exclude: /node_modules/,use: {loader: 'babel-loader',}},{test: /\.html$/,use: [{loader: 'html-loader'}]}]},plugins:[new HtmlWebpackPlugin({template: './index.html',filename: './index.html'})]
}

错误解决
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\目录\react-node-demo\src\main.js: Support for the experimental syntax ‘jsx’ isn’t currently enabled (8:10):

6 | ReactDOM.createRoot(
7 | document.getElementById(‘app’)
8 | ).render();

在项目目录下新建.babelrc.js文件

module.exports ={presets: [["@babel/preset-react",{development: process.env.BABEL_ENV === "development",},],],
}

详细见babel:https://babeljs.io/docs/en/babel-preset-react.html

目录结构

|-- react-node-demo
|-- .babelrc.js
|-- index.html
|-- package-lock.json
|-- package.json
|-- REMADE.md
|-- webpack.config.js
|-- yarn-error.log
|-- src
|-- App.jsx
|-- main.js

react项目中使用css

安装依赖

npm i style-loader css-loader --save-dev

webpack.config.js配置

  module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader']}]},