什么是工程？
工程这个词最早出现不是在 it 行业，出现在建筑行业，因为建筑行业里面，例如修楼，里面包含了一系列繁杂的工作，并且每一项工作是由先后顺序的，所以有了建筑工程的概念。
后面软件开发就引入了 “工程” 这个概念随着我们软件规模越来越大，要做的事情也是越来越多，大学里面还有一个专业 “软件工程”。
现在前端开发满面也出现了 “前端工程化” 的概念，因为咱们前端要做的事情也是越来越多。从一开始构建整个项目，到编写代码，如果是使用一些其他工具(less,sass,ts,coffeescript) 编写的，还涉及到编译，测试，打包，能罗列出来的事情有一大堆，不像以前只是写一俩个页面就完事。
工程化和构建工具
在向着工程化靠近的路上，出现了构建工具，很多人直接将工程化和构建工具画等号，这个其实是不对的。前端工程化 ！= 前端构建工具。
因为严格的来讲，工程化实际上一套方法论，目的是解决大型项目和团队协作中遇到的代码维护和扩展问题，目标是为了提高开发效率，代码质量可维护性。
而前端构建工具只是前端工程化里面的一环，不能画等号。
接下来就是关于构建工具间，
前面有提到，前端前面要做的事情越来越多了，实际上有一部分工作时和业务逻辑无关的
- 文件优化：压缩 javaScript,css,HTML代码,压缩合并图片等。
- 代码转化：将 TypeScript/Es6 编译为 javaScript、将 sass 编译为 css 等
- 代码优化：为 css 代码添加兼容性前缀。
这些工作都要做虽然和业务逻辑无关，但是你又不得不做。 既然这些工作做，那们谁来做这些事情？ 这里为您会通过一些工具来完成这些事情。但是这里又遇到一个问题，往往上面的这些事情需要几个工作来完成，这里会存在一种情况：需要先将项目拖入到工具a进行处理，然后再工具b进行处理c,d,f...
上面的步骤量显得非常麻烦，我们期望有一个工具能够帮助我们把上面的事情按照一定的顺序自动化的完成，这个工具就是我们前端构建工具。
总得来讲，“构建工具” 里面 “构建”二字是个重点，这个工具究竟构建了一个啥？
将我们开发环境下的项目代码构建为能够部署上线的代码。 通过构建工具，我们就可以省去烦杂的步骤，直接一条指令就能将开发环境的项目构建为生产环境代码，之后要做的就是部署上线。
目前前端领域就有非常多的构建工具，整体来讲可以分为三代：
- 第一代构建工具：以 grunt,gulp 为代表的构建工具(解决打包)
- 第二代构建工具：以 webpack 为代表的构建工具(模块打包减少http请求)
- 第三代构建工具：以 vite 为代表的构建工具(提升开发者使用体验，跳过打包直接本地启动服务器拦截请求访问本地资源)
