前言：相信很多小伙伴在平时听得最多的，就是前端工程化巴拉巴拉什么的，而构建工具就是前端工程化很重要的一环。那么什么是构建工具呐，就是可以对我们的项目进行编译、测试、打包、优化、压缩等功能的工具，称为构建工具，而前端构建工具有很多，常见的分为两类，一类是基于任务的打包工具 grunt、gulp，另一类是基于模块的打包工具 webpack、vite、esbuild、roolup、parcel、browserify。而这么多的构建工具，我们要都想掌握，所需要付出的时间成本和精力成本对比所得到的收获，是不成正比的，所以，我们需要紧跟时代潮流，洞悉最新流行技术，本文主要讲解，vite 最新构建工具，和 webpack 使用最多工具。

一：Vite

可以参考 Vite 官方文档速通。

1. 介绍

Vite 是一种新型的前端构建工具，特别设计用于快速开发。Vite 支持使用原生 ES 模块作为开发环境，采用按需编译的方式，因此在开发过程中能够获得更快的冷启动速度。Vite 集成了 Vue.js，但也可以用于其他框架或库。

2. 优点

快速的冷启动、即时的热更新、按需编译

3. 缺点

功能不如 webpack 强大

4. 原理

| 使用 esbuild 对依赖进行预构建，esbuild 的打包速度很快。

| 利用浏览器对 esm 原生支持这一特性，让浏览器接管了打包程序的部分工作。

| 按需加载：在浏览器执行 esm 的 import 时，浏览器会向开发服务器请求该模块。

| 热更新是基于 websocket 实现的，也是在 esm 上执行的，只更新编辑了的文件，而不是把整个页面重新编译。

| vite 使用 http 缓存来加速页面的重新加载，源码模块会进行协商缓存，依赖模块会进行强缓存。

| 使用 rollup 进行打包，因为 rollup 和 vite 的 api 能够很好的兼容，而且社区比较活跃，有很多插件可以使用。

| 打包对代码进行优化，tree-shaking、懒加载和分割等优化。

二：webpack

1. 介绍

Webpack 是一个现代化的静态模块打包工具，它将前端项目中的各种资源（JavaScript、CSS、图片等）视为模块，并通过依赖关系进行静态分析和打包。

2. 优点

模块化支持、打包优化、插件系统、开发工具支持

3. 缺点

学习成本高、配置复杂、构建速度慢

4. 原理

| 入口点识别：Webpack 根据配置文件中指定的入口点（entry）开始分析项目的依赖关系。

| 依赖分析：Webpack 通过解析入口文件和其依赖文件，构建整个项目的依赖关系图。它可以识别出哪些文件被引入、被依赖，并形成一个依赖关系树。

| 模块转换：Webpack 根据配置文件中的各种规则（如加载器-loader）对各个模块进行转换，将它们转换为浏览器可理解的格式（如将 ES6 转换为 ES5，将 SCSS 转换为 CSS）。

| 打包输出：在完成模块转换后，Webpack 将所有的模块打包成一个或多个输出文件，通常是一个或多个 JavaScript 文件。这些输出文件可以在浏览器中加载和执行。