【前端工程化面试题】常见的前端构建工具有哪些？请讲一下他们的应用场景？

视频讲解

前端构建工具是一种针对前端开发的构建工具，用于自动化前端项目的构建过程。

手工构建时代 - 代码压缩、图片压缩、代码合并
- 无
自动化构建时代 - 任务流工具：
- Grunt：一种基于任务流的前端构建工具，可以帮助自动化执行编译、压缩、合并等操作。
- Gulp：一种基于任务流的前端构建工具，可以帮助自动化执行编译、压缩、合并等操作。
模块化构建时代 - 模块打包器：
- Webpack：目前最流行的构建工具之一，它是一个模块打包器，可以将多个JavaScript文件打包成一个文件，并且支持处理CSS、图片等资源文件。Webpack具有丰富的插件生态系统和配置选项，可以满足各种复杂的构建需求。
- Rollup：专门用于打包JavaScript库的构建工具，它支持ES modules，并且在构建过程中能够去除未使用的代码，因此生成的代码体积更小。
Bundless构建时代 - 前端调试器(Bundless):
- Snowpack:采用 ESM（ECMAScript 模块）作为默认格式，可以实现快速且轻量级的构建。
- Vite: 利用ES模块和浏览器原生的动态import功能，实现了快速的冷启动和热更新。

概括：
- 常见的构建工具主要是Webpack、和Rollup这种打包器
- 在老项目中还会看到Grunt和Gulp这种基于工作流的构建工具
- 当然新还有一种Vite这种Bundlerless这种高效的高效的构建工具
阐述：
- Webpack的特点是
  - 应用广泛、生态鉴权特别适合在项目型项目使用
  - 在新的4.0和5.0版本中比如现在流行的Treesharking这种新特性也有支持
- Rollup：
  - 是特别适合类型库型项目的开发，比如组件库。比如常见的ElementUI和Vue都是使用它作为构建工具
- Vite：是一种新型的构建工具，开发的时候使用Bundless方式启动快速，开发体验好。而且作为Vue的亲儿子。未来对Vue3.0的支持也肯定能够得到很好的保证
总结：这三个流行的框架生态体系都很健全，而且也都有相当多的成功案例。
- 在现行上我推荐从应用场景出发：
  - 项目型：尤其是核心项目选择 Webpack，强调可靠性
  - 类库型： Rollup
  - 非核心项目：可以尝试Vite