当前位置： 首页 > news >正文

React 18 + Babel 7 + Webpack 5 开发环境搭建

news 2026/5/23 20:00:28


文章目录

  • 一、基础开发环境搭建
    • 1. 新建项目目录
    • 2. 项目目录结构及内容
    • 3. 安装 React 18 + Babel 7 + Webpack 5
    • 4. 配置 Babel 和 Webpack
    • 5. 调试/构建项目
  • 二、扩展项目支持的能力（待补充）
    • 1. JS 扩展（待补充）
    • 2. CSS 扩展（待补充）
    • 3. 热更新（待补充）
    • 4. 按需加载（待补充）
    • 5. 第三方库的使用（待补充）
  • 三、代码标准化（待补充）
    • 1. 代码校验 ESLint（待补充）
  • 四、代码发布（待补充）
    • 1. 生产环境 webpack 配置（待补充）

一、基础开发环境搭建

1. 新建项目目录

返回目录

mkdir example #创建项目目录
cd example #进入项目目录
npm init -y #生成 package.jsom

2. 项目目录结构及内容

返回目录

example # 项目目录
├── public # 静态公用目录
│   └── index.html # html模板
├── src # 源代码目录
│   ├── pages # 页面目录
│   │   └── home # 主页目录
│   │       └── index.js # 主页代码
│   └── index.js # React 入口代码
└── package.json
  1. public/index.html：html 模版”
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><!-- 移动端全屏 --><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" /><meta name="theme-color" content="#000000" /><!-- 防止页面缓存 --><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><!-- 页面标题 html-webpack-plugin 插件替换 --><title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body><!-- React根节点 --><div id="root"></div>
</body>
</html>
  2. src/pages/home/index.js：首页
    import React from 'react'; //引入 reactfunction Home() {return (<div>Hello, World!</div>)
}export default Home;
  3. src/index.js：React 的入口文件
    'use strict';
import React from 'react'; //引入 react
import { createRoot } from 'react-dom/client';
import Home from '../src/pages/home'; //引入本项目的首页//把首页渲染到 html 模版的 react 根节点上
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(<Home />);

3. 安装 React 18 + Babel 7 + Webpack 5

返回目录

# 安装 React主程序  dom操作    路由
npm i -S react react-dom react-router-dom# 安装babel
npm i -D @babel/core @babel/preset-env @babel/preset-react# 安装 webpack主程序  支持命令行 本地开发用web服务 处理html插件
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin# 安装 webpack加载器
$ npm i -D babel-loader css-loader style-loader

4. 配置 Babel 和 Webpack

返回目录

  1. 更新项目目录l
    example # 项目目录
├── public # 静态公用目录
│   └── index.html # html模板
├── src # 源代码目录
│   ├── pages # 页面目录
│   │   └── home # 主页目录
│   │       └── index.js # 主页代码
│   └── index.js # React 入口代码
├── .babelrc # babel配置文件               新增
├── webpack # webpack配置目录              新增
│   └── dev.js # 开发环境配置文件           新增
└── package.json
  2. 新建文件 .babelrc
    {"plugins": ["@babel/syntax-dynamic-import"],"presets": [["@babel/preset-env",{"modules": false}],"@babel/preset-react"]
}
  3. 新建 webpack/dev.js：开发环境配置文件
    // 引用库
const path = require('path');
const webpack = require('webpack');// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');// 路径方法
const resolve = pathname => path.resolve(__dirname, `../${pathname}`);
const stylesHandler = MiniCssExtractPlugin.loader;module.exports = {mode: 'development',entry: resolve('src/index.js'),output: {clean: true,filename: 'js/[name].[hash:5].bundle.js', //出口文件path: resolve('dist') //输出路径},devServer: {open: true,host: 'localhost',},plugins: [new HtmlWebpackPlugin({title: 'HTML页面标题', //替换index.html的title标签内容template: resolve('public/index.html'), //html模版的位置}),new MiniCssExtractPlugin({filename: 'css/[name].[contenthash:5].css',chunkFilename: 'css/[id].[contenthash:5]\'.css',ignoreOrder: false}),],module: {rules: [{test: /\.(js|jsx)$/i,loader: 'babel-loader',},{test: /\.css$/i,use: [stylesHandler, 'css-loader'],},{test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,type: 'asset',},],},
};

    注意：loader 的加载顺序是从右往左，从下往上

5. 调试/构建项目

返回目录

  1. 修改 package.jsom，在 “scripts” 下添加运行和构建命令
    {"scripts": {"dev": "webpack serve -c webpack/dev.js","build:dev": "webpack -c webpack/dev.js"}
}
  2. 用 npm 执行脚本命令
    npm run dev   # 调试项目
npm run build # 构建项目

二、扩展项目支持的能力（待补充）

返回目录

1. JS 扩展（待补充）

返回目录

2. CSS 扩展（待补充）

返回目录

3. 热更新（待补充）

返回目录

4. 按需加载（待补充）

返回目录

5. 第三方库的使用（待补充）

返回目录

三、代码标准化（待补充）

返回目录

1. 代码校验 ESLint（待补充）

返回目录

四、代码发布（待补充）

1. 生产环境 webpack 配置（待补充）

返回目录

相关文章：

React 18 + Babel 7 + Webpack 5 开发环境搭建

文章目录 一、基础开发环境搭建1. 新建项目目录2. 项目目录结构及内容3. 安装 React 18 Babel 7 Webpack 54. 配置 Babel 和 Webpack5. 调试/构建项目 二、扩展项目支持的能力&#xff08;待补充&#xff09;1. JS 扩展&#xff08;待补充&#xff09;2. CSS 扩展&#xff08…...

编程日记 2024/7/15 23:48:19

MongoDB Shard 集群 Docker 部署

MongoDB Shard Docker 部署 部署环境 主机地址主机配置主机系统Mongodb1/192.168.31.1352CPU 4GBDebian12Mongodb2/192.168.31.1092CPU 4GBDebian12Mongodb3/192.168.31.1652CPU 4GBDebian12 镜像版本 mongodb/mongodb-community-server:5.0.27-ubuntu2004 部署集群 部署…...

编程日记 2024/7/15 23:47:18

MacOS 开发 — Packages 程序 macOS新版本 演示选项卡无法显示

MacOS 开发 — Packages 程序 macOS新版本 演示选项卡无法显示 问题描述 &#xff1a; 之前写过 Packages 的使用以及如何打包macOS程序。最近更新了新的macOS系统&#xff0c;发现Packages的演示选项卡无法显示&#xff0c;我尝试从新安转了Packages 也是没作用&#xff0c;…...

编程日记 2024/7/15 23:46:17

Hive的分区表分桶表

1.分区表&#xff1a; 是Hive中的一种表类型&#xff0c;通过将表中的数据划分为多个子集&#xff08;分区&#xff09;&#xff0c;每个分区对应表中的某个特定的列值&#xff0c;可以提高查询性能和管理数据的效率。分区表的每个分区存储在单独的目录中&#xff0c;分区的定义…...

编程日记 2024/7/15 23:45:16

PostgreSQL17索引优化之支持并行创建BRIN索引

PostgreSQL17索引优化之支持并行创建BRIN索引 最近连续写了几篇关于PostgreSQL17优化器改进的文章&#xff0c;其实感觉还是挺有压力的。对于原理性的知识点&#xff0c;一方面是对这些新功能也不熟悉&#xff0c;为了尽可能对于知识点表述或总结做到准确&#xff0c;因此需要…...

编程日记 2024/7/15 23:43:14

在Vue中，子组件向父组件传递数据

在Vue中&#xff0c;子组件向父组件传递数据通常通过两种方式实现&#xff1a;事件和回调函数。这两种方式允许子组件与其父组件进行通信&#xff0c;传递数据或触发特定的行为。 1. 通过事件传递数据 子组件可以通过触发自定义事件&#xff0c;并将数据作为事件的参数来向父组…...

编程日记 2024/7/15 23:41:12

数据结构（顺序表）

谈起顺序表&#xff0c;那我们就不得不先来了解一下它的上级概念---线性表 线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是⼀种在实际中⼴泛使⽤的数据结构&#xff0c;常⻅的线性表&#xff1a;顺序表、链表、栈、队列…...

编程日记 2024/7/15 23:35:05

MySQL之基本查询(上)-表的增删查改

目录 Create(创建) 案例建表 插入 单行数据 指定列插入 单行数据 全列插入 多行数据 全列插入 插入是否更新 插入时更新 替换 Retrieve(读取) 建表插入 select列 全列查询 指定列查询 查询字段为表达式 为查询结果指定别名 结果去重 where条件 比较运算符 逻辑运…...

编程日记 2024/7/15 23:32:02

RocketMQ源码学习笔记：Producer发送消息流程

这是本人学习的总结&#xff0c;主要学习资料如下 马士兵教育rocketMq官方文档 目录 1、Overview2、验证消息3、查找路由4、选择消息发送队列4.1、选择队列的策略4.2、源码阅读4.2.1、轮询规避4.2.2、故障延迟规避4.2.2.1、计算规避时间4.2.2.2、选择队列 4.2.3、ThreadLocal的…...

编程日记 2024/7/15 23:31:01

kotlin flow collect collectLatest 区别

在 Kotlin 协程库中&#xff0c;collect 和 collectLatest 都是用于收集 Flow 中发射的数据的方法&#xff0c;但它们在处理数据和响应新数据的方式上有所不同。 collect collect 是一个挂起函数&#xff0c;用于收集 Flow 中发射的所有数据。它会按顺序处理每一个发射的数据…...

编程日记 2024/7/15 23:30:00

ELK集群搭建

ELK集群搭建 文章目录 ELK集群搭建1.环境准备2.Elasticsearch环境搭建1.创建es账户并设置密码2.选择对应版本进行下载3.编辑配置文件4.设置JVM堆大小 #7.0默认为4G5.创建es数据及日志存储目录6.修改安装目录和存储目录权限 3.系统优化1.增加最大文件打开数2.增加最大进程数3.增…...

编程日记 2024/7/15 23:26:58

zookeeper+kafka消息队列集群部署

一.消息队列 1、什么是消息队列 消息&#xff08;Message&#xff09;是指在应用间传送的数据。消息可以非常简单&#xff0c;比如只包含文本字符串&#xff0c;也可以更复杂&#xff0c;可能包含嵌入对象。 消息队列&#xff08;MessageQueue&#xff09;是一种在软件系统中用…...

编程日记 2024/7/15 23:22:54

LLM_入门指南（零基础搭建大模型）

本文主要介绍大模型的prompt&#xff0c;并且给出实战教程。即使零基础也可以实现大模型的搭建。 内容&#xff1a;初级阶段的修炼心法&#xff0c;帮助凝聚和提升内力&#xff0c;为后续修炼打下基础。 1、prompt 1.1含义和作用 prompt就是提示工程的意思。在大型语言模型中…...

编程日记 2024/7/15 23:17:50

Element Plus 与 Vue 3：构建现代化 Web 应用的完美搭档

引言 Element Plus是基于Vue 3的组件库&#xff0c;它继承了Element UI的优秀基因&#xff0c;为Vue 3应用提供了丰富的界面组件。Element Plus不仅拥有与Element UI相同的高质量组件&#xff0c;还针对Vue 3进行了优化和更新&#xff0c;确保了与Vue 3的无缝集成。 环境准备…...

编程日记 2024/7/15 23:16:48

线程间通信与变量修改感知：几种常用方法

线程间通信与变量修改感知&#xff1a;几种常用方法 1. 使用volatile关键字2. 使用synchronized关键字3. 使用wait/notify/notifyAll机制4. 使用轮询&#xff08;Polling&#xff09; &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java…...

编程日记 2024/7/15 23:13:45

前后端通信 —— HTTP/HTTPS

目录 一、HTTP/HTTPS 简介 1、HTTP 2、HTTPS 二、HTTP 工作过程 三、HTTP 消息 1、HTTP消息结构 2、HTTP消息示例 四、HTTP 方法&#xff08;常用&#xff09; 1、GET 2、POST 3、PUT 4、DELETE 5、GET与POST对比 五、HTTP 状态码&#xff08;常用&#xff09; …...

编程日记 2024/7/15 23:10:42

人工智能 (AI) 应用：一个高精度ASD 诊断和照护支持系统

自闭症谱系障碍&#xff08;ASD&#xff09;是一种多方面的神经发育状况&#xff0c;影响全球大约1/100的儿童&#xff0c;而在中国&#xff0c;这一比例高达1.8%&#xff08;引用自《中国0&#xff5e;6岁儿童孤独症谱系障碍筛查患病现状》&#xff09;&#xff0c;男童为2.6%…...

编程日记 2024/7/15 23:08:40

C# 1.方法

方法组成&#xff1a; 1.修饰符&#xff1a;public一般定义共有的 2.方法返回值&#xff1a;void 无返回值; 非void&#xff0c;可以写成其他类型例如int&#xff0c;float&#xff0c;string,string[]等 3.方法名&#xff1a;Add 大驼峰命名法&#xff0c;每一个首字符大写。…...

编程日记 2024/7/15 23:07:39

【C++进阶学习】第七弹——AVL树——树形结构存储数据的经典模块

二叉搜索树&#xff1a;【C进阶学习】第五弹——二叉搜索树——二叉树进阶及set和map的铺垫-CSDN博客 目录 一、AVL树的概念 二、AVL树的原理与实现 AVL树的节点 AVL树的插入 AVL树的旋转 AVL树的打印 AVL树的检查 三、实现AVL树的完整代码 四、总结 前言&#xff1a…...

编程日记 2024/7/15 23:06:38

px,em,rem之间的关系换算

px,em,rem之间的换算 px&#xff1a;普通大小 em&#xff1a;相对单位&#xff0c;相对于父元素的字体大小 rem&#xff1a;相对单位&#xff0c;相对于根元素&#xff08;html&#xff09;的字体大小 <!DOCTYPE html> <html lang"en"> <head>…...

编程日记 2024/7/15 23:03:34

别再死记硬背了！用Multisim仿真软件，5分钟搞懂三极管放大电路的静态工作点设置与失真分析

用Multisim玩转三极管放大电路&#xff1a;静态工作点设置与失真分析实战指南 刚接触模拟电路时&#xff0c;三极管放大电路就像一道难以逾越的门槛。那些密密麻麻的公式、抽象的特性曲线&#xff0c;让多少电子工程专业的学生在深夜实验室里抓耳挠腮。但今天&#xff0c;我要告…...

编程新知 2026/5/23 18:57:24

5分钟掌握OpenTracks：隐私优先的开源运动跟踪应用全面指南

5分钟掌握OpenTracks&#xff1a;隐私优先的开源运动跟踪应用全面指南 【免费下载链接】OpenTracks Repository moved to: https://codeberg.org/OpenTracksApp/OpenTracks 项目地址: https://gitcode.com/gh_mirrors/op/OpenTracks 你是否厌倦了那些不断要求网络权限、…...

编程新知 2026/5/23 16:24:39

终极突破指南：三步解锁原神PC版帧率限制，让你的显卡火力全开

终极突破指南&#xff1a;三步解锁原神PC版帧率限制&#xff0c;让你的显卡火力全开 【免费下载链接】genshin-fps-unlock unlocks the 60 fps cap 项目地址: https://gitcode.com/gh_mirrors/ge/genshin-fps-unlock 你是否曾经在提瓦特大陆上驰骋时&#xff0c;感觉自己…...

编程新知 2026/5/23 16:03:02

gibMacOS深度技术解析：跨平台macOS组件下载与构建系统

gibMacOS深度技术解析&#xff1a;跨平台macOS组件下载与构建系统 【免费下载链接】gibMacOS Py2/py3 script that can download macOS components direct from Apple 项目地址: https://gitcode.com/gh_mirrors/gi/gibMacOS gibMacOS是一款基于Python开发的跨平台macOS…...

编程新知 2026/5/23 15:33:49

CharacterAI Python API终极指南：如何快速构建AI对话机器人

CharacterAI Python API终极指南&#xff1a;如何快速构建AI对话机器人 【免费下载链接】CharacterAI Unofficial Python API for character.ai 项目地址: https://gitcode.com/gh_mirrors/ch/CharacterAI 你是否想在自己的Python应用中集成CharacterAI的强大对话功能&a…...

编程新知 2026/5/23 14:37:43

《病隙碎笔》生病卧床的日子，才知道拥有健康身心的时刻是多么宝贵

《病隙碎笔》生病卧床的日子&#xff0c;才知道拥有健康身心的时刻是多么宝贵 史铁生&#xff08;1951/1/4-2010/12/31&#xff09;&#xff0c;作家&#xff0c;散文家&#xff0c;代表作有《我与地坛》《命若琴弦》《奶奶的星星》等。 湖南文艺出版社 文章目录《病隙碎笔》生…...

编程新知 2026/5/23 12:57:58

Ubuntu18多用户情况一用户桌面卡死，鼠标能动但点击没用——解决办法

按 Ctrl Alt F1到 F6中的某一个&#xff0c;切换到TTY终端&#xff0c;需要去试一下我的为F4输入用户名和密码然后输入&#xff1a;# 找到问题用户的会话ID loginctl list-sessions | grep username1# 终止该用户的图形会话&#xff08;不会影响其他用户&#xff09; sudo lo…...

编程新知 2026/5/23 12:47:44

Windows右键菜单终极管理指南：ContextMenuManager让你的电脑更高效

Windows右键菜单终极管理指南&#xff1a;ContextMenuManager让你的电脑更高效 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager Windows右键菜单是日常操作中不可…...

编程新知 2026/5/23 12:15:46

从一道SWPUCTF题复盘PHP文件包含漏洞：allow_url_include开启后，除了伪协议还能怎么玩？

从SWPUCTF赛题探索PHP文件包含漏洞的深层攻防 在CTF竞赛和实际渗透测试中&#xff0c;PHP文件包含漏洞一直是Web安全领域的重要课题。这道来自SWPUCTF新生赛的题目看似简单&#xff0c;却蕴含了丰富的攻防对抗思路。当allow_url_include配置被开启时&#xff0c;攻击面会显著扩…...

编程新知 2026/5/23 12:00:28

区块链与计算机视觉融合：构建可信机器感知系统的架构与实践

1. 项目概述&#xff1a;当计算机视觉遇见区块链在人工智能的浪潮中&#xff0c;计算机视觉&#xff08;CV&#xff09;无疑是那颗最耀眼的明星之一。它让机器拥有了“看”和理解世界的能力&#xff0c;从医疗影像中精准定位病灶&#xff0c;到自动驾驶汽车识别路况&#xff0c…...

编程新知 2026/5/23 11:14:39