webpack4+react18构建项目

1.开发环境 react18+webpack4
2.电脑系统 windows11专业版
3.随着工作经验的积累,我们会发现官方脚手架创建出来的项目有很多都是没有用的,那我们怎么自己从0开始创建项目呢?下来我来分享一下我的方法,希望对你有所帮助。
4.在这里我选择的是react,那么首先我们需要先简单的来了解一下react。

开发React必须依赖三个库:
react:包含react所必须的核心代码
react-dom:react渲染在不同平台所需要的核心代码
babel:将jsx转换成React代码的工具

4-1. react 依赖核心:

react : react 包中包含了react和react-native所共有的核心代码。
react-dom:
react-dom针对web和native所完成的事情不同:
web端:react-dom会讲jsx最终渲染成真实的DOM,显示在浏览器中
native端:react-dom会讲jsx最终渲染成原生的控件(比如Android中的Button,iOS中的UIButton)。
babel:
比如当下很多浏览器并不支持ES6的语法,但是确实ES6的语法非常的简洁和方便,我们开发时希望使用它。
那么编写源码时我们就可以使用ES6来编写,之后通过Babel工具,将ES6转成大多数浏览器都支持的ES5的语法。

5.初始化项目:

npm init -y

6.首先是安装:

// react 安装
npm i react react-dom -S
or npm i react@18 react-dom@18 -S
// babel依赖安装,具体可以看babel 官网
npm i @babel/preset-env @babel/preset-react @babel/core babel-loader@8 -D
// webpack 安装
npm webpack@4 webpack-cli@4 webpack-dev-server html-webpack-plugin@4 -D

7.创建src目录,在src目录创建index.js和index.html

// index.js
import React from 'react';
// 注意这里ReactDOM是从client引入
import ReactDOM from 'react-dom/client';
function App () {
 return (<div>Hello,Chen</div>)
}
ReactDOM.createRoot(document.getElementById('app')).render(<App />);
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>chen-react-admin</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

8.创建webpack.config.js(和package.json同级)

const path = require("path");
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry:'./src/index.js',
 output: {
 filename: 'index.js',//出口文件名
 path: path.resolve(__dirname, 'dist'),//出口路径
 },
 mode: 'development',//模式
 module:{
 rules:[
 {
 test:/\.(js|jsx)$/,
 use:{
 loader:'babel-loader'
 }
 }
 ]
 },
 plugins:[
 new htmlWebpackPlugin({
 template:'./src/index.html'
 })
 ]
}

9.创建babel.config.js(和package.json同级)

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

10.添加package.json配置:

"scripts": {
 "start": "webpack-dev-server --config webpack.config.js"
 },

11.终端执行 npm start

//项目已经启动成功了,项目只是进行简单的配置,后期会不断完善

12.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

作者:灰太狼的情与殇原文地址:https://segmentfault.com/a/1190000043483660

%s 个评论

要回复文章请先登录注册