使用Webpack搭建React脚手架（上篇）_react脚手架配置webpack-优快云博客

本文链接：https://blog.youkuaiyun.com/UI_linlan/article/details/135186486

搭建React脚手架是开发React应用的重要一步，它可以帮助我们快速初始化项目结构，并且集成一些常用的开发工具和库，提高开发效率。本文将介绍如何来搭建一个React脚手架，并详细介绍每一步的步骤。

版本

 pnpm 版本

pnpm -v 7.27.1

# 初始化package.json文件

pnpm init

会在根目录生成一个 package.json 文件：

{
"name": "fe",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

基本项目结构

在根目录新建基本的项目结构：

├── build
| ├── webpack.base.ts # 公共配置
| ├── webpack.dev.ts # 开发环境配置
| └── webpack.prod.ts # 打包环境配置
├── public
│ └── index.html # html模板
├── src
| ├── App.tsx
| ├── App.css
│ └── index.tsx # react应用入口页面
└── package.json

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>webpack5-react-ts</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

引入react

安装依赖：

pnpm i react react-dom
# 声明依赖
pnpm i @types/react @types/react-dom -D

接下来先将入口文件 src/index.tsx 写好：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const root = document.querySelector('#root')
if(root) {
createRoot(root).render(<App />)
}

App.tsx ：

import React from 'react'
import './App.css'
function App() {
return <h2>Hello East_White</h2>
}
export default App

引入typescript

为什么要使用 typescript ?

当使用 JavaScript 编写大型项目时，可能会面临许多挑战，例如代码管理，可扩展性，协作和维护等。 TypeScript 则是一种解决这些挑战的工具，它有如下的一些优点：

1. 更好的代码质量： TypeScript 的静态类型系统可以帮助开发人员在编写代码时捕获错误，这可以提高代码质量和稳定性。

2. 更好的可读性和可维护性： TypeScript 的静态类型系统和类可以提高代码的可读性和可维护性，特别是在大型项目中。这可以使代码更易于理解和修改。

3. 更好的IDE支持： TypeScript 具有出色的IDE支持，包括自动完成，语法突出显示和类型检查。这可以提高开发人员的生产力和准确性。

4. 更好的可扩展性： TypeScript 支持面向对象编程，可以帮助开发人员创建复杂的数据类型和接口，并使代码更易于扩展和维护。

5. 更好的协作： TypeScript 可以帮助开发团队更好地协作，因为代码的结构和类型是显式声明的。这可以减少在协作开发中出现的潜在问题和错误。

6. 更好的性能：由于 TypeScript 可以在编译时捕获错误，因此可以减少运行时错误并提高性能。

总的来说， TypeScript 可以提高代码质量，可读性，可维护性，可扩展性和协作，并且可以提高性能。这些优点使得 TypeScript 成为编写大型项目的优秀选择。

接下来，我们在项目中引入 typescript ，先安装依赖：

pnpm i typescript -D
pnpm i babel-loader ts-node 
@babel/core @babel/preset-react @babel/presettypescript @babel/preset-env core-js -D

初始化 tsconfig.json ：

npx tsc --init
# 如果全局安装了typescript，也可以通过下面的命令创建
tsc --init

就会在根目录生成一个tsconfig.json文件：

{
"compilerOptions": {
"incremental": true, 
"target": "ESNEXT", 
"module": "commonjs", 
"lib": [], 
"allowJs": true, 
"checkJs": true, 
"jsx": "preserve", 
"declaration": true, 
"declarationMap": true, 
"sourceMap": true, 
"outFile": "./", 
"outDir": "./",
"rootDir": "./", 
"composite": true, 
"tsBuildInfoFile": "./", 
"removeComments": true, 
"noEmit": true,
"noEmitOnError": true, 
"importHelpers": true, 
"downlevelIteration": true, 
"isolatedModules": true, 
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true, 
"noImplicitThis": true,
"noImplicitAny": true, 
"noUnusedLocals": true,
"noUnusedParameters":