README.md · wanguo_sun/sun_project

# 【前端工程化】webpack5从零搭建完整的react18+ts开发和打包环境

## 目录

1.  前言
2.  初始化项目
3.  配置基础版**react**+**ts**环境
4.  常用功能配置
5.  优化构建速度
6.  优化构建结果文件
7.  总结

## 一. 前言

本文将使用最新的**webpack5**一步一步从零搭建一个完整的**react18+ts**开发和打包环境，配置完善的模块热替换以及**构建速度**和**构建结果**的优化，完整代码已上传。

## 二. 初始化项目

在开始**webpack**配置之前，先手动初始化一个基本的**react**+**ts**项目，新建项目文件夹**webpack5-react-18**, 在项目下执行

```bash
npm init -y
```

初始化好**package.json**后,在项目下新增以下所示目录结构和文件

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

安装**webpack**依赖

```sh
npm i webpack webpack-cli -D
```

安装**react**依赖

```sh
npm i react react-dom -S
```

安装**react**类型依赖

```sh
npm i @types/react @types/react-dom -D
```

执行**npm run build**,最终打包在**dist**文件中, 打包结果:

```sh
dist
├── static
|   ├── js
|     ├── main.js
|   ├── css
|   ├── images
├── index.html
```

**3. 浏览器查看打包结果**

打包后的**dist**文件可以在本地借助**node**服务器**serve**打开,全局安装**serve**

## 参考

1.  [webpack官网](https://www.webpackjs.com/)
2.  [babel官网](https://www.babeljs.cn/)

wanguo_sun/sun_project

简介

发行版

贡献者

近期动态

wanguo_sun/sun_project .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

wanguo_sun/sun_project