webpack5搭建react脚手架详细步骤

1. 初始化项目

首先,创建一个新目录并初始化项目:

bash

mkdir create-react
cd create-react
pnpm init --y
git init

这里使用pnpm作为包管理工具,因为它在处理依赖和速度上表现更好。

2. 安装React和TypeScript

安装React和React-DOM,以及它们的类型定义:

bash

pnpm add react react-dom
pnpm add -D @types/react @types/react-dom

接着,安装TypeScript并初始化配置文件:

bash

pnpm add typescript -D
tsc --init

你可以根据自己的需求修改tsconfig.json配置文件。

3. 创建源文件

src目录下创建index.tsxApp.tsx文件:

tsx

// index.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom/client'
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('app')!)
root.render(<App />)

tsx

// App.tsx
import * as React from 'react'
const App: React.FC = () => {return <div>hello React</div>
}
export default App

4. 安装Webpack及相关依赖

安装Webpack、Webpack CLI、Webpack Dev Server和Webpack Merge:

bash

pnpm add webpack webpack-cli webpack-dev-server webpack-merge -D

这些工具将帮助我们配置和运行Webpack。

5. 配置Webpack

创建webpack.config.js(或其他你喜欢的文件名),并设置基本的Webpack配置:

javascript

const path = require('path');
​
module.exports = {entry: path.resolve(__dirname, '../src/index.tsx'),output: {path: path.resolve(__dirname, '../dist'),filename: '[name].[contenthash].js',},
};

这个配置指定了入口文件和输出配置。

6. 配置开发服务器

创建webpack.dev.jswebpack.prod.js来分别配置开发和生产环境:

javascript

// webpack.dev.js
const { merge } = require('webpack-merge');
const base = require('./webpack.config.js');
​
module.exports = merge(base, {mode: 'development',devServer: {open: true,port: 8080,},
});

javascript

// webpack.prod.js
const { merge } = require('webpack-merge');
const base = require('./webpack.config.js');
​
module.exports = merge(base, {mode: 'production',
});

这些配置文件将根据环境不同应用不同的设置。

7. 配置Babel

安装Babel相关依赖,并在webpack.config.js中配置Babel loader:

bash

pnpm add -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

webpack.config.js中添加Babel配置:

javascript

module: {rules: [{test: /\.(js|ts|jsx|tsx)$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }],'@babel/preset-typescript','@babel/preset-react',],},},},],
},

这个配置允许Webpack通过Babel处理JSX和TSX文件。

8. 配置图片和字体

在Webpack 5中,可以直接使用资源模块(asset module)来处理图片和字体,无需额外的loader。在webpack.config.js中添加以下配置:

javascript

module: {rules: [{test: /\.(png|jpg|gif|svg|webp)$/i,type: 'asset',parser: {dataUrlCondition: {maxSize: 25 * 1024, // 25kb},},generator: {filename: 'assets/imgs/[name].[hash:8][ext]',},},{test: /\.(eot|ttf|woff|woff2)$/i,type: 'asset',parser: {dataUrlCondition: {maxSize: 25 * 1024, // 25kb},},generator: {filename: 'assets/fonts/[name].[hash:8][ext]',},},],
},

这个配置将图片和字体分别打包到imgsfonts目录下。

9. 完成配置并运行

最后,更新package.json中的脚本以运行Webpack:

json

"scripts": {"dev": "cross-env NODE_ENV=development webpack serve -c scripts/webpack.dev.js","build": "cross-env NODE_ENV=production webpack -c scripts/webpack.prod.js"
}

现在,你可以使用pnpm dev来启动开发服务器,或者使用pnpm build来构建生产版本

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56936.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频编辑的创意工坊,使用视频剪辑软件将视频随机分割成两段并去声进行MP3音频和M3u8文件的生成,让视频制作更高效

面对海量的视频编辑任务&#xff0c;你是否曾感到手足无措&#xff0c;渴望一种既简单又高效的方式来处理它们&#xff1f;别担心&#xff0c;媒体梦工厂软件带着它的魔法棒来啦&#xff01;它就像一位技艺高超的视频巫师&#xff0c;能轻松帮你在线完成视频编辑任务&#xff0…

如何在SpringTask的定时任务中创建动态的定时任务

在Spring框架中&#xff0c;如果你需要在定时任务中动态创建新的定时任务&#xff0c;可以使用TaskScheduler接口。TaskScheduler提供了对任务调度的更细粒度的控制&#xff0c;允许你在运行时动态地创建和管理定时任务。1. 配置 TaskScheduler 首先&#xff0c;需要在Spring配…

提示工程(Prompt Engineering)指南(入门篇)

一、什么是AIGC AIGC全称为 “Artificial Intelligence Generated Content”&#xff0c;即 “人工智能生成内容”。代表了一种由语言模型和聊天机器人等人工智能系统驱动的内容创作的突破性方法。与人类作者制作的传统内容不同&#xff0c;AIGC 是通过算法生成的&#xff0c;…

二十二、Python基础语法(模块)

模块(module)&#xff1a;在python中&#xff0c;每个代码文件就是一个模块&#xff0c;在模块中定义的变量、函数、类别人都可以直接使用&#xff0c;如果想要使用别人写好的模块&#xff0c;就必须先导入别人的模块&#xff0c;模块名须满足标识符规则&#xff08;由字母、数…

解密 Redis:如何通过 IO 多路复用征服高并发挑战!

文章目录 一、什么是 IO 多路复用&#xff1f;二、为什么 Redis 要使用 IO 多路复用&#xff1f;三、Redis 如何实现 IO 多路复用&#xff1f;四、IO 多路复用的核心机制&#xff1a;epoll五、IO 多路复用在 Redis 中的工作流程六、IO 多路复用的优点七、IO 多路复用使用中的注…

stm32 ISP 串口程序下载

硬件原理图&#xff1a; 下载是通过 uart1 。不同的芯片 &#xff0c; 下载的uart 是不一样的。 最终连接到了 PA9&#xff0c; PA10 驱动的安装&#xff1a; 这里的驱动我已经安装过了。 程序下载软件 flymcu 是免安装的。 需要注意的点就是这些。 下载实测&#xff1a;…

电脑连接海康相机并在PictureBox和HWindowControl中分别显示。

展示结果&#xff1a; 下面附上界面中所有控件的Name&#xff0c;只需照着红字设置对应的控件Name即可 下面附上小编主界面的全部代码&#xff1a; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; …

【算法练习】最小生成树

题意&#xff1a;【模板】最小生成树 方法1&#xff1a;Prim算法(稠密边用优&#xff09; #include <bits/stdc.h> using namespace std; int n,m,u,v,d,ans; bool f[5001]; vector<pair<int,int>> a[5001];//用结构体和重载比直接定义小根堆似乎还快一点点…

利用 Google AI 工具提升应用智能化:ML Kit、TensorFlowLite、Cloud Vision、AutoML、Gemini

在code应用开发中&#xff0c;机器学习和人工智能正逐渐成为提升用户体验和应用智能化的重要手段。Google 提供了多种强大的 AI 工具&#xff0c;可以帮助开发者快速集成各种机器学习功能。本文将详细介绍五个关键工具&#xff1a; Firebase ML Kit、TensorFlow Lite、Google …

kafka 的高可用机制是什么?

大家好&#xff0c;我是锋哥。今天分享关于【kafka 的高可用机制是什么&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; kafka 的高可用机制是什么&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Apache Kafka 是一个分布式消息系统&am…

Peach-9B-8k-Roleplay模型部署指南

一、模型介绍 Peach-9B-8k-Roleplay 是一种聊天大型语言模型&#xff0c;它是通过我们的数据合成方法创建的超过 100K 的对话中微调 01-ai/Yi-1.5-9B 模型而获得的。 也许是 34B 以下参数最好的 LLM。 二、部署过程 1、更新环境 apt update2、安装Miniconda wget https://…

标准日志插件项目【C/C++】

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;项目日记_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 一&#xff0c;项目介…

二、Spring的执行流程

文章目录 1. spring的初始化过程1.1 ClassPathXmlApplicationContext的构造方法1.2 refresh方法&#xff08;核心流程&#xff09;1.2.1 prepareRefresh() 方法1.2.2 obtainFreshBeanFactory() 方法1.2.3 prepareBeanFactory() 方法1.2.4 invokeBeanFactoryPostProcessors() 方…

2024年9月电子学会Scratch图形化编程等级考试三级真题试卷

2024年9月Scratch图形化编程等级考试三级真题试卷 一、选择题 第 1 题 单选题 scratch运行下列程序后&#xff0c;变量“和”的取值范围是&#xff1f;&#xff08; &#xff09; A.0~12 B.0~11 C.2~11 D.2~12 第 2 题 单选题 默认角色小猫&#xff0c;scratch运行下列…

深度学习:Matplotlib篇

一、简介 1.1 什么是 Matplotlib&#xff1f; Matplotlib 是一个广泛使用的 2D 绘图库&#xff0c;它可以用来在 Python 中创建各种静态、动态和交互式的图表。无论是科学计算、数据可视化&#xff0c;还是深度学习模型的训练与评估&#xff0c;Matplotlib 都能提供强大的图形…

【Python】if选择判断结构详解:逻辑分支与条件判断

目录 &#x1f354; if选择判断结构作用 1.1 if选择判断结构的基本语法 1.2 if选择结构案例 1.3 if...else...结构 1.4 if...elif...else多条件判断结构 1.5 if嵌套结构 &#x1f354; 综合案例&#xff1a;石头剪刀布 2.1 需求分析 2.2 代码实现 2.3 随机出拳 &…

【数据结构】快速排序(三种实现方式)

目录 一、基本思想 二、动图演示&#xff08;hoare版&#xff09; 三、思路分析&#xff08;图文&#xff09; 四、代码实现&#xff08;hoare版&#xff09; 五、易错提醒 六、相遇场景分析 6.1 ❥ 相遇位置一定比key要小的原因 6.2 ❥ 右边为key&#xff0c;左边先走 …

redis详细教程(2.List教程)

List是一种可以存储多个有序字符串的数据类型&#xff0c;其中的元素按照顺序排列&#xff08;可以重复出现&#xff09;&#xff0c;可以通过数字索引来访问列表中的元素&#xff0c;索引可以从左到右或者从右到左。 Redis 列表可以通过两种方式实现&#xff1a;压缩列表&…

P11232 [CSP-S 2024] 超速检测(民间数据)

原题链接​​​​​​ 来分析这道题&#xff0c;题中所说由于是匀加速直线运动&#xff0c;所以超速的区间一定是连续的&#xff0c;而且还可以被计算出来&#xff0c;但是要注意区间的开闭。 我们可以把超速的区间变为测速仪的分布区间。 这道题可以通过多区间贪心来实现&a…

JAVA 单例模式实验(头歌)

第1关&#xff1a;单例模式 任务描述 在企业网站后台系统中&#xff0c;一般会将网站统计单元进行独立设计&#xff0c;比如登录人数的统计、IP 数量的计数等。在这类需要完成全局统计的过程中&#xff0c;就会用到单例模式&#xff0c;即整个系统只需要拥有一个计数的全局对象…