前言
据我了解，前端开发构建工具目前有两大类： bundle和no bundle, 其中,
bundle类工具主要代表： webpack, parcel， rollup, esbuild.
no bundle类主要代表： snowpack, vite.
在过去的几年，webpack之类的bundle打包工具，成为大多数web应用程序构建的必要步骤。这是因为：
- 在HTTP 1.x时代， 浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞，从而影响性能，因此合并请求非常有必要；
- 在以前的浏览器中， nodejs的CommonJS模块和ES模块，普遍都无法直接运行，必须转换处理，这也为bundler的存在提供了合理性。
- bundle处理本身也有很多优点，比如webpack支持很多插件，可以支持各种文件处理以及混淆压缩等。
但是bundler的存在，却真实的增加了前端应用开发很多的复杂性，也一定程度影响开发效率， 比如bundle体积过大，热更新速度慢等。而且到了2020后的现代，以上的问题基本上都不复存在：
- http2多路复用，允许同时通过单一的http2连接发起多重的请求-响应消息。随着http2的普及，合并请求变得没那么必要。
- 浏览器普遍开始支持ESM模块。
no bundle构建工具普遍的一个特点就是配置相对简单， 启动和热更新快， 开发体验较好， 这样自然而然开始流行起来。比如vue 2.0用webpack， 到vue 3.0就抛弃webpack改用自研的vite工具了。
当然no bundle也不是真的no bundle， 毕竟bundle还是有很多优势的，在构建发布时也依然用到bundle工具, 如snowpack可以选择bundler如webpack，vite使用了rollup.
内容
webpack
官方描述： 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
rollup
官方描述： Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。
esbuild
官方描述： An extremely fast JavaScript bundler.
snowpack
官方描述： Snowpack 是为现代浏览器设计的一个超级快的前端构建工具, 它是你在开发工作流程中使用更笨重更复杂的bundle打包工具如webpack, parcel的另一个可选方案。Snowpack利用JavaScript的本地模块系统(即ESM)来避免不必要的（转换）工作, 并在你无论你工程增长多大时保持运行快速。
vite
官方描述： Vite 是一种新型前端构建工具，能够显著提升前端开发体验。
(vite vue 3.0引入， 使用了esbuild + rollup, 集合两家之长)
小结
webpack升级到5.x,依然是强大的主流选择，但是不再是一统天下了。
esbuild 和 rollup 都是小巧玲珑，主打先进和快，仅用于javascript。
vite 未来主要依然是用于vue 3.0的生态中。
snowpack 朝大而全发展，支持react, vue, svelte等。