什么是工程
当看不懂一个词语的时候，有一个好的方式就是拆词。
- 工：一项一项的工作、要做的事情
- 程：程序、流程、做事情的先后步骤
“工程”就是指一件事要做的步骤非常多，并且每一个步骤是有先后顺序的。
工程这个词最早出现在建筑行业。例如修楼，里面包含了一系列繁杂的工作，并且每一项工作有先后顺序，就有了建筑工程的概念。
后面软件开发引入了“工程”这个概念，随着软件规模越来越大，要做的事情也是越来越多。大学里面还有一个专业——“软件工程”。
现在前端开发慢慢也出现了“前端工程化”的概念。因为前端要做的事情，并且能做的事情越来越多了。从一开始构建整个项目、到编写代码、如果是使用一些其他语言（Less、Sass、ES6+、TypeScript、CoffeeScript）编写还涉及到编译、测试、打包，能罗列出来的事情有一大堆，不像以前只是写页面就完事儿。
工程化和构建工具
在向着工程化靠近的路上，出现了构建工具。
工程化是一套方法论，目的是解决大型项目和团队协作中遇到的代码维护和扩展问题，为了提高开发效率、代码质量和可维护性。
而前端构建工具只是前端工程化里面的一环，不能够划等号。
关于构建工具，前端目前要做的事情越来越多，实际上有一部分工作是和业务逻辑无关的：
- 文件优化：压缩代码，压缩合并图片等。
- 代码转换：将 TypeScript/ES6+ 编译成 JavaScript、将 SCSS 编译成 CSS 等。
- 代码优化：为 CSS 代码添加兼容性前缀等。
- …
这些工作虽然和业务逻辑无关，但是又不得不做，那么谁来做这些事情？
可以通过一些工具来完成这些事情，但是又遇到一个问题，往往上面的这些事情需要好几个工具来完成：需要先将项目拖入到工具 A 进行处理，之后再拖入到工具 B 进行处理，C、D、E、…
上面的步骤显得非常的麻烦，期望有一个工具能够帮助我们把上面的事情按照一定的顺序自动化的完成，这个工具就是“构建工具”。
通过构建工具，就可以省去繁杂的步骤，直接一条指令就能将开发环境的项目构建为生产环境的项目代码，之后要做的就是部署上线即可。
目前前端领域有非常多的构建工具，整体来讲可以分为三代：
- 第一代构建工具：以 Grunt、Gulp 为代表的构建工具
- 第二代构建工具：以 Webpack、Rollup 为代表的构建工具
- 第三代构建工具：以 Vite 为代表的构建工具