React | React脚手架解析

✨ 个人主页：CoderHing

🖥️ React.js专栏：React脚手架解析
🙋‍♂️ 个人简介：一个不甘平庸的平凡人🍬

💫 系列专栏：吊打面试官系列  16天学会Vue  11天学会React  Node专栏

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力！❤️

---

目录

一、认识脚手架工具

前端工程的复杂化

脚手架是什么?

前端脚手架

二、create-react-app

安装node

三、创建React项目

创建React项目

目录结构分析

了解PWA

四、webpack配置

脚手架中的webpack

---

一、认识脚手架工具

前端工程的复杂化

• 如果我们只是开发几个小demo,那么就不需要考虑这些问题:

  • 目录结构如何组织划分,

  • 如何管理文件之间的相互依赖

  • 如何管理第三方模块依赖

  • 项目发布前的压缩,打包

  • 等...

• 现代的前端项目越来越复杂化

  • 不会再是HTML引入css,引入几个js或者第三方js那么简单

  • 如css可能是less,scss等预处理器,我们需要将其转换成普通的css才能被浏览器解析

  • 如JavaScript代码不再只是编写在几个文件中,而是通过模块化的方式,被组成在成百上千的文件中,需要通过模块化的技术来管理他们之间的相互依赖

  • 如项目需要依赖的第三方库,如何更好的进行管理(版本升级等..)

• 为了