什么是构建工具

构建工具，顾名思义，用于构建项目的工具，重点在于理解构建的意思。
生产环境中，项目代码运行在各种环境中，web 应用的项目代码运行在浏览器上。
而技术的革新，推出了各式各样的前端框架(vue、react、angular)各种更高级与方便的编程语言，
比如 js 的超集 typescript,各种 css 预编译语言 less、sass。这些东西极大的提升了开发效率。但是需要思考的一个问题是，浏览器只认识 js、css、html 代码
而不认识上面提到的这些高级编程语言。所以在这中间就存在一个转换的过程，简而言之，构建工具就是用于编译项目代码的，编译成浏览器能看懂的代码。

开发者只需要把产品开发出来交付就好了，而我们客户考虑的可就多了

在很久以前，网页基本上都是静态的、简陋的，相当于一份赛博报纸。这个时候压根不需要什么构建工具，只需要把信息放到页面上就行了。
随着技术的发展，js的出现，网页开始变得花里胡哨了起来。这个时候项目的复杂度变得更高了，出现了许多新的语言或者框架，便于开发者团队进行开发与管理。
有一天团队开会，客户提了新的需求，要产品能够兼容各式各样的浏览器。因为不同的浏览器内核对于同一份代码的执行规则是不同的，就像不同的cpu对于系统资源的调度规则也是不一样的，可能在这个浏览器上这行代码对应的样式是红色，
但是在另一个浏览器上，对应的可能是深红色(这仅仅是一个例子)。但是大多数都大同小异，因为已经有制定标准的组织在做这个事情。
世界和平与统一！唠偏了。

  1. 编译：将高级编程语言（如TypeScript、Sass）转换为浏览器可以理解的低级语言（如JavaScript、CSS）。
  2. 打包：将多个模块和文件合并成一个或多个文件，以减少HTTP请求数量，提高加载速度。
  3. 优化：对代码和资源进行优化，以提高性能和减少文件大小。
  4. 代码分割：将代码分割成多个小块，以便按需加载，提高应用性能。
  5. 静态资源处理：处理和优化静态资源，如图片、字体等，对于。
  6. 开发服务器：提供一个本地开发服务器，支持热重载（Hot Reload），以便在开发过程中实时预览更改。
  7. 代码降级：将es6或者更高版本的代码降级，兼容低版本的浏览器。

构建工具就是用来自动化和简化这些步骤的工具，常见的构建工具包括Webpack、Rollup、Parcel和Vite等。