作者 | 刘皇逊(恪语) 来源 | 阿里开发者公众号
前言
本篇文章主要讲解如何从一个空目录开始，建立起一个基于webpack + react + typescript的标准化前端应用。
技术栈: webpack5 + React18 + TS
工程化: eslint + prettier + husky + git hooks
支持图片、less、sass、fonts、数据资源(JSON、csv、tsv等)、Antd按需加载以及主题
支持热更新、资源压缩、代码分离（动态导入、懒加载等）、缓存、devServer
背景
在项目开发中，我们可以使用create-react-app或者飞冰等脚手架工具，那么，为什么我们要自己来搭建一个标准化项目？
原因
当我们使用优秀的脚手架工具开发项目时，当然会提升很多便利，他们的功能更全面、性能更强大，但是在这些值得学习的榜样面前，我们需要从零开始，动手去实现每一个细节和功能，看的再多都不如自己动手实现一个demo更有效果。并且动手实践也可以帮助我们理解项目打包和编译的原理，进而提升自己的技术熟练度，扩展我们的知识面。Webpack 实现工程化方方面面的功能，自然不是 all in one code实现的。从 Webpack 的设计理念和实现原理中，我们能接触到工程化方面的知识：架构扩展、插件化、缓存机制。学习Webpack也代表着学习前端的发展趋势：例如在webpack的竟对Vite上，我们可以学到bundleless的理念，跳过了传统的打包这个概念，并且其他先进理念都是我们需要去学习的地方。
开发中，我们发现使用def、aone等生成一个成熟的前端项目模版，不难会发现，项目中的babel、weback、prettier、loader等配置文件缺失，而且难以修改现成的脚手架配置，可扩展能力较弱。导致在性能优化方面能做的工作有限，使得开发受到限制。
点击链接查看原文，关注公众号【阿里开发者】获取更多福利！https://mp.weixin.qq.com/s/4XxG4NB1dGnWiZdKxGsS5g
