1 Star 0 Fork 0

wanguo_sun/sun_project

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

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

目录

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

一. 前言

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

二. 初始化项目

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

npm init -y

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

├── 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依赖

npm i webpack webpack-cli -D

安装react依赖

npm i react react-dom -S

安装react类型依赖

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

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

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

3. 浏览器查看打包结果

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

参考

  1. webpack官网
  2. babel官网

空文件

简介

使用webpack5、react 、typescript 、react-router、qiankun、eslint、style-lint、commander、postcss、http-server搭建的开发环境 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/wanguo_sun/sun_project.git
git@gitee.com:wanguo_sun/sun_project.git
wanguo_sun
sun_project
sun_project
master

搜索帮助

A270a887 8829481 3d7a4017 8829481