【个人笔记】2023年搭建基于webpack5与typescript的react项目
写在前面
由于我在另外的一些文章所讨论或分析的内容可能基于一个已经初始化好的项目,为了避免每一个文章都重复的描述如何搭建项目,我在本文会统一记录下来,今后相关的文章直接引用文本,方便读者阅读。此文主要为个人笔记,不会有太多的关于思路的描述;另外,本文仅仅描述如何搭建基础react项目,不涉及图片等资源的加载,关于图片等资源的处理,我会单独编写一期。
项目初始化
创建一个目录,例如:webpack5-react-demo,然后进入目录执行初始化指令
$ mkdir webpack5-react-demo
$ cd webpack5-react-demo
$ yarn init
yarn init v1.22.19
question name (webpack5-react-demo):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
Done in 10.32s.
添加gitignore文件,路径为项目根目录/.gitignore
:
.idea
.vscode
node_modules
dist
初始化git仓库:
$ git init
$ git add .
$ git commit -m 'init'
(0)NPM依赖添加
echo '【1】基于webpack的项目核心相关内容'
echo '添加webpack基础四件套依赖'
yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin
echo '【2】处理js(x)、ts(x)的相关模块'
echo '添加babel核心模块'
yarn add -D @babel/core
echo '添加babel相关preset欲集'
yarn add -D @babel/preset-env @babel/preset-react @babel/preset-typescript
echo '添加babel相关plugin插件'
yarn add -D @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
echo '添加babel-loader'
yarn add -D babel-loader
echo '【3】处理style样式的相关模块'
echo '添加css-loader以及MiniCssExtractPlugin'
yarn add -D css-loader mini-css-extract-plugin
yarn add -D less less-loader
echo '【4】添加react/react-dom的类型定义以及运行依赖'
yarn add react react-dom
yarn add -D @types/react @types/react-dom
(1)webpack.config.js
作用:webpack基本配置,定义入口、各种loader、plugin等。
路径:项目根目录/webpack.config.js
内容:
const {resolve} = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development",
entry: {
main: resolve(__dirname, 'src', 'index.tsx')
},
output: {
filename: "index.js",
path: resolve(__dirname, 'dist')
},
resolve: {
// webpack 默认只处理js、jsx等js代码
// 为了防止在import其他ts代码的时候,出现
// " Can't resolve 'xxx' "的错误,需要特别配置
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.tsx?/,
use: [
'babel-loader'
],
exclude: /node_moudles/
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, 'public', 'index.html'),
inject: 'body'
}),
new MiniCssExtractPlugin({
filename: 'app.css'
})
],
devServer: {
port: 8080
}
}
(2).babelrc
作用:被@babel/core读取使用,其中定义了@babel/core要用到的preset、plugin等组件,对ts文件进行编译。想要深入理解,可以阅读另一篇文章:【长文详解】TypeScript与Babel、webpack的关系以及IDE对TS的类型检查 - 知乎 (zhihu.com)。
路径:项目根目录/.babelrc
内容:
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript",
["@babel/preset-react", {"runtime": "automatic"}]
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties"
]
}
(3)tsconfig.json
作用:仅作为IDE进行TypeScript类型检查服务的文件,与ts代码编译没有直接关系。可以阅读另一篇文章来了解:【长文详解】TypeScript与Babel、webpack的关系以及IDE对TS的类型检查 - 知乎 (zhihu.com)
路径:项目根目录/tsconfig.json
内容:
{
"compilerOptions": {
"module": "commonjs",
"rootDir": "./src",
"outDir": "./dist",
"jsx": "react-jsx"
}
}
(4)项目代码
src目录下,三个文件:index.tsx、index.module.less、react-app.d.ts。
src/index.tsx
路径:项目根目录/src/index.tsx
内容:
import {createRoot} from "react-dom/client";
import styles from './index.module.less';
const App = () => {
return <div className={styles.app}>Hello, <span>App</span></div>
}
createRoot(document.querySelector('#app')).render(<App/>)
src/index.module.less
路径:项目根目录/src/index.module.less
内容:
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
box-sizing: border-box;
}
.app {
height: 100%;
width: 100%;
font-size: 20px;
span {
color: rgb(0, 111, 222);
font-size: 24px;
}
}
src/react-app.d.ts(特别)
作用:仅仅用于类型定义,目前定义的是模块化less文件的结构定义。
路径:项目根目录/src/react-app.d.ts
内容:
declare module '*.module.less' {
const content: {
[className: string]: any
}
export default content;
}
public/index.html
作用:指定的html模板,根webpack.config.js里面HtmlWebpackPlugin所制定的模板路径保持一致。
路径:项目根目录/public/index.html
内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
运行
在package.json中添加运行脚本:
{
"name": "webpack5-react-demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
+ "scripts": {
+ "dev": "webpack-dev-server --config webpack.config.js"
+ },
"devDependencies": {
... ...
},
"dependencies": {
... ...
}
}
效果:
附录
图解webpack配置与NPM包关系
github仓库
w4ngzhen/webpack5-react-demo (github.com)
【个人笔记】2023年搭建基于webpack5与typescript的react项目的更多相关文章
- [读书笔记] 三、搭建基于Spring boot的JavaWeb项目
一.POM <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3. ...
- 搭建基于eclipse的纯的JavaWeb项目
-----------2016.9.9--------------------- 步骤: 1.搭建一个Java项目 2,字该项目下新建一个文件夹,表示根,名字为webapp(name随意) 3,在we ...
- 一文详解如何在基于webpack5的react项目中使用svg
本文主要讨论基于webpack5+TypeScript的React项目(cra.craco底层本质都是使用webpack,所以同理)在2023年的今天是如何在项目中使用svg资源的. 首先,假定您已经 ...
- 从0开始基于Webpack5 搭建HTML+Less 前端工程
基于Webpack5 搭建HTMl+Less的前端项目 新建一个文件夹(比如命名为webpack) 用编辑器打开该文件夹,并在编辑器的终端执行 npm init -y 自动创建pa ...
- Docker学习笔记之一,搭建一个JAVA Tomcat运行环境
Docker学习笔记之一,搭建一个JAVA Tomcat运行环境 前言 Docker旨在提供一种应用程序的自动化部署解决方案,在 Linux 系统上迅速创建一个容器(轻量级虚拟机)并部署和运行应用程序 ...
- 搭建基于python +opencv+Beautifulsoup+Neurolab机器学习平台
搭建基于python +opencv+Beautifulsoup+Neurolab机器学习平台 By 子敬叔叔 最近在学习麦好的<机器学习实践指南案例应用解析第二版>,在安装学习环境的时候 ...
- 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...
- 面向服务体系架构(SOA)和数据仓库(DW)的思考基于 IBM 产品体系搭建基于 SOA 和 DW 的企业基础架构平台
面向服务体系架构(SOA)和数据仓库(DW)的思考 基于 IBM 产品体系搭建基于 SOA 和 DW 的企业基础架构平台 当前业界对面向服务体系架构(SOA)和数据仓库(Data Warehouse, ...
- 象写程序一样写博客:搭建基于github的博客
象写程序一样写博客:搭建基于github的博客 前言 github 真是无所不能.其 Pages 功能 支持上传 html,并且在页面中显示.于是有好事者做了一个基于 github 的博客管理工具 ...
- Windows 7下 搭建 基于 ssh 的sftp 服务器
Windows xp 下 搭建 基于 ssh 的sftp 服务器,服务器端可以用 freesshd,F-secure server等,filezilla server不可用,之前傻乎乎的用file ...
随机推荐
- NC23482 小A的最短路
题目链接 题目 题目描述 小A这次来到一个景区去旅游,景区里面有N个景点,景点之间有N-1条路径.小A从当前的一个景点移动到下一个景点需要消耗一点的体力值.但是景区里面有两个景点比较特殊,它们之间是可 ...
- 开源神器:自动生成随机 mock 数据测试对象
测试的痛点 大家好,我是老马. 每一位开发者大部分工作都是写代码.测试代码.修BUG. 我们有很多测试代码,总是花费大量的实践去构建一个对象. 于是就在想,能不能自动填充一个对象呢? 于是去 gith ...
- python中矩阵合并、拼接、组合
1 numpy数组 1.1 append() import numpy as np a=np.array([[1,3],[5,7]]) b=np.array([[2,4],[6,8]]) c=np.a ...
- 【OpenGL ES】基于ValueAnimator的旋转、平移、缩放动效
1 前言 ValueAnimator 基于 Choreographer 的 frame callback 机制,周期性(约16.7ms,与屏幕帧率相关)执行其 doAnimationFrame() ...
- 全流程点云机器学习(一)使用CloudCompare自制sharpNet数据集
前言 这不是高支模项目需要嘛,他们用传统算法切那个横杆竖杆流程复杂耗时很长,所以想能不能用机器学习完成这些工作,所以我就来整这个工作了. 工欲善其事,必先利其器,在正式开始之前,我们先要搞懂如何切分数 ...
- 机器学习策略篇:详解为什么是ML策略?(Why ML Strategy?)
为什么是ML策略? 从一个启发性的例子开始讲,假设正在调试的猫分类器,经过一段时间的调整,系统达到了90%准确率,但对的应用程序来说还不够好. 可能有很多想法去改善的系统,比如,可能想去收集更多的训练 ...
- golang读取用户名和密码文件并生成笛卡尔积
密码爆破时需要读取用户名字典和密码字典来生成笛卡尔积派发爆破任务:直接读取全部字典内容到内存时成本较高: package main import ( "bufio" "f ...
- webrtc 的理解
常规视频的传输包括以下几个步骤:采集,编码,推流,转码,分发,拉流,解码和渲染 在一个实时的音视频系统架构里,上面的每个环节都会有一定程度的优化空间. 以下内容摘自:rtmp直播和webrtc直播对比 ...
- 团队协作如何确保项目Node版本的一致性?
前言 想必大家在工作过程中都遇到过node版本带来的各种各样的问题,对于团队协作项目,你不能保证所有人的本地node版本都相同,所以在项目文档中往往会写上以下内容: 为与线上环境一致,请保证以下版本 ...
- 【Azure Redis】Azure Redis添加了内部虚拟网络后,其他区域的主机通过虚拟网络对等互连访问失败
问题描述 跨区域无法访问Azure Redis服务, Redis 启用了Network并设置在一个VNET中,现在客户端部署在另一个区域数据中心中,两个数据中心区域使用VNET Peer(对等互连)访 ...