Grunt

Grunt是基于配置的

gulp

gulp 基于代码配置和对 Node.js 流的应用

webpack

webpack模块化打包器

1、通过命令行和 webpack.config.js 来获取参数
2、创建compiler对象，初始化plugins
3、开始编译阶段，addEntry添加入口资源
4、addModule 创建模块
5、runLoaders 执行 loader
6、依赖收集，js 通过acorn解析为 AST，然后查找依赖，并重复 4 步
7、构建完依赖树后，进入生成阶段，调用compilation.seal
8、经过一系列的optimize优化依赖，生成 chunks，写入文件

rollup

rollup编译ES6模块，提出了Tree-shaking，根据ES module静态语法特性，删除未被实际使用的代码 rollup专注于纯javascript，大多被用作打包tool工具或library库

parcel

parcel 使用 worker 进程去启用多核编译，并且使用文件缓存。 parcel 支持 0 配置，内置了 html、babel、typescript、less、sass、vue等功能，无需配置，并且不同于webpack只能将 js 文件作为入口，在 parcel 中万物皆资源，所以 html 文件 css 文件都可以作为入口来打包

browserify、webpack、rollup、parcel这些工具的思想都是递归循环依赖，然后组装成依赖树，优化完依赖树后生成代码

简单的汇总：

• 前端运行时模块化
  • RequireJs AMD 规范
  • sea.js CMD 规范
• 自动化工具
  • Grunt 基于配置
  • Gulp 基于代码和文件流
• 模块化
  • browserify 基于CommonJs规范只负责模块化
  • rollup 基于ES module，tree shaking优化代码，支持多种规范导出，可通过插件集成压缩、编译、commonjs 语法 等功能
• 工程化
  • webpack 大而全的模块化构建工具
  • parcel 极速 0 配置的模块化构建工具
  • snowpack/vite ESM运行时模块化构建工具