什么是前端构建工具?比如（Vue2的webpack，Vue3的Vite）

① 浏览器理解的基础与项目功能

首先要明白：浏览器它只认识html, css, js。

在企业级项目中，可能会具备以下功能：

1. TypeScript：如果遇到ts文件，我们需要使用tsc将TypeScript代码转换为js代码。
2. React/Vue：安装react-compiler / vue-complier，将我们写的jsx文件或者.vue文件转换为render函数。
3. Less/PostCSS/Component-Style：我们又需要安装less-loader, sass-loader等一系列编译工具。
4. 语法降级：Babel将ES的新语法转换为旧版浏览器可以接受的语法。
5. 体积优化：UglifyJS将我们的代码进行压缩，变成体积更小、性能更高的文件。

② 前因后果：自动化处理的必要性

因为稍微改一点点东西，非常麻烦！
将App.tsx -> tsc -> App.jsx -> React-complier -> js文件。

但是有一个东西能够帮你把tsc, react-compiler, less, babel, uglifyjs全部集成到一起，我们只需要关心我们写的代码就好了。
我们写的代码变化 -> 有人帮我们自动去tsc, react-compiler, less, babel, uglifyjs全部挨个走一遍 -> js。
这个东西就叫做 前端构建工具。

③ 前端构建工具的工作原理

前端构建工具的工作包括：

• 打包：将我们写的浏览器不认识的代码交给构建工具进行编译处理的过程就叫做打包。打包完成后会给我们一个浏览器可以认识的文件。
• 构建工具承担的工作：
  1. 模块化开发支持：支持直接从node_modules里引入代码 + 多种模块化支持。
  2. 处理代码兼容性：比如babel语法降级，less, ts语法转换（不是构建工具做的，构建工具将这些语法对应的处理工具集成进来，自动化处理）。
  3. 提高项目性能：压缩文件，代码分割。
  4. 优化开发体验：
     • 构建工具会帮你自动监听文件的变化，当文件变化后自动帮你调用对应的集成工具进行重新打包，然后在浏览器重新运行（整个过程叫做热更新, hot replacement）。
     • 开发服务器：跨域的问题，用react-cli create-react-element vue-cli·解决跨域的问题。

④ 构建工具总结

构建工具它让我们可以不用每次都关心我们的代码在浏览器如何运行，我们只需要首次给构建工具提供一个配置文件（这个配置文件也不是必须的，如果你不给他，他会有默认的帮你去处理）。
有了这个集成的配置文件以后，我们就可以在下次需要更新的时候调用一次对应的命令就好了，如果我们再结合热更新，我们就更加不需要管任何东西，这就是构建工具去做的东西。

构建工具它让我们不用关心生产的代码，也不用去关心代码如何在浏览器运行，只需要关心我们的开发怎么写的爽怎么写就好了。