react-demo项目:纯零搭建react项目（不用create-react-app脚手架）
新建目录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(
<div>
hello
</div>
)
}
main.js文件
import React from "react";
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
ReactDOM.createRoot(
document.getElementById('app')
).render(<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>Documenttitle>
head>
<body>
<div id="app">div>
body>
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']
}]
},