什么是构建工具？
一般项目会具备的一些功能
- typescript：如果遇到 ts 文件我们需要使用 tsc 将其转化为 js文件
- React/Vue：安装 react-compile / vue-compile 将 jsx 或者 vue 文件转化为render函数然后解析为js文件
- less/sass/postcss：安装对应的 loader 将其编译为 css 文件
- 语法降级：使用 babel 将高等语法降级，兼容更多浏览器
- 体积优化：在打包的时候使用压缩工具压缩代码，例如terserjs，uglifyj
- .......
在我们将代码稍微改动一些的话，上述流程就会变得很麻烦，例如，改动了App.tsx
App.tsx --> tsx --> App.jsx --> react-compile --> App.js
如果有一个东西将上述流程全部集成到一起，帮我们完成上述流程，我们只需要去书写代码就好了，这个就是构建工具做的事。
构建工具到底做了些什么事情呢？
- 模块化开发支持：支持多种模块化支持，支持直接从 node_modules 里面引入代码 （如果直接引入loadsh会报错，后面细说）
- 处理代码兼容性：比如 babel 语法降级，less，ts语法转化，当然这些不是构建工具完成的，构建工具是把处理这些内容的工具集成起来了，然后进行了自动化处理
- 提高项目性能：压缩文件，代码分割
- 优化开发体验：
-
-
构建工具会自动监听文件的变化，当文件变化以后会自动调用其对应的工具处理，然后进行重新打包，然后浏览器再重新运行，这个过程也就是我们经常听说的热更新--hot replacement
-
开发服务器：跨域的问题，用 react-cli / vue-cli 配置解决跨域问题
-
常见的构建工具
市面上流行的构建工具：
- webpack
- vite
- esbuild
- gulp
- rollup
- .......
总结
构建工具可以让我们不用每次都去关心代码是如何在浏览器运行的，我们只需要给他一个配置文件（当然不给的话也会有一些默认的配置），有了这个集成的配置后，在下次文件代码更新后，调用一次对应的处理工具就好了，结合热更新，我们就更加不用去管这些了，总之就是让我们在写代码的过程中怎么爽就怎么写就好了。
