前言
模块化管理工具和自动化构建工具是不同的。两者主要体现在侧重点不一样。自动化构建工具侧重于前端开发的 整个过程 的控制管理（像是流水线）。而模块化管理工具更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块。
-
Webpack
webpack可以说是当前最流行的模块化管理工具和打包工具。其通过loader的转换，可以将任何形式的资源视作模块。它还可以将各个模块通过其依赖关系打包成符合生产环境部署的前端资源。它还可以将应用程序分解成可管理的代码块，可以按需加载。
打包原理：
解析各个模块的依赖关系 使用loader转换文件，使用plugin注入钩子，打包合并模块，最终生成bundle文件，使用express开启本地服务器， 浏览器请求的是bundle文件，也就是打包过后的文件。
优点：
- 基本之前gulp 可以进行的操作处理，现在webpack也都可以做；
- 同时支持热更新，支持tree shaking 、Scope Hoisting、动态加载、代码拆分、文件指纹、代码压缩、静态资源处理等；
- 支持多种打包方式。
等等
缺点：
1.各个模块之间的依赖关系过于复杂 会导致打包速度很慢
2.使用热更新时，改动一个模块，其他有依赖关系的模块也会重新进行打包
3.不支持打包出esm格式的代码 (打包后的代码再次被引用时tree shaking 困难)， 打包后亢余代码较多。
-
Vite
和webpack差不离，vite是当下新兴的模块化管理工具和打包工具。它的本地启动速度相较于webpack快了很多，但是目前来说，vite还完全没有能够替换webpack的能力，不管是从社区还是从能力来讲，vite他本身还是太过脆弱，他的产生跟火热完全依赖于vue本身的热度。
打包原理:
使用koa开启本地服务器，没有webpack那样打包合并的过程，所以启动服务器很快，@vue/compiler-sfc会对模块进行编译 （修改一些引入文件的路径 css编译成js字符串）浏览器再请求编译好的模块。
缺点:
1.项目的开发浏览器要支持esmodule
2.不能识别commonjs语法
3.生态不及webpack，加载器、插件不够丰富
4.生产环境esbuild构建对于css和代码分割不够友好
5.没被大规模重度使用，会隐藏一些问题
-
Rollup
Rollup 是一个模块打包工具, 可以将我们按照 ESM (ES2015 Module) 规范编写的源码构建输出如下格式:
- IIFE: 自执行函数, 可通过
<script>标签加载 - AMD: 通过
RequireJS加载 - CommonJS: Node 默认的模块规范, 可通过
Webpack加载 - UMD: 兼容 IIFE, AMD, CJS 三种模块规范
- ESM: ES2015 Module 规范, 可用
Webpack,Rollup加载
优点：
- 支持动态导入。
- 支持tree shaking。仅加载模块里用得到的函数以减小文件大小。
- Scope Hoisting。 rollup可以将所有小文件生成到一个大文件中，所有代码都在同一个函数作用域里:， 不会像 Webpack 那样用很多函数来包装模块。
- 没有其他冗余代码, 执行很快。除了必要的
cjs,umd头外，bundle 代码基本和源码差不多，也没有奇怪的__webpack_require__,Object.defineProperty之类的东西,
缺点：
- 不支持热更新功能；
- 对于commonjs模块，需要额外的插件将其转化为es2015供rollup 处理；
- 无法进行公共代码拆分。
适用场景：
由纯js开发的第三方库； 需要生成单一的umd文件的场景
比较（和webpack）：
- 基于权衡，Rollup 目前还不支持代码拆分（Code Splitting）和模块的热更新（HMR）
- 一般而言，对于应用使用 Webpack，对于类库使用 Rollup；
- 需要代码拆分(Code Splitting)，或者很多静态资源需要处理，再或者构建的项目需要引入很多 CommonJS 模块的依赖时，使用 webpack。代码库是基于 ES6 模块，而且希望代码能够被其他人直接使用，使用 Rollup
- Rollup 与 Webpack 有着不同的用途，因此会共同存在，并相互支持
- React 已经将构建工具从 Webpack 换成了 Rollup
使用：
https://www.cnblogs.com/tugenhua0707/p/8179686.html
-
Gulp
Gulp 是基于“流”的前端自动化构建工具，采用代码优于配置的策略，更易于学习和使用，它让简单的任务简单，复杂的任务可管理。
它是基于Nodejs，自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
优点：
- gulp文档简单，学习成本低，使用简单；
- 对大量源文件可以进行流式处理，借助插件，可以对文件类型进行多种操作处理。
缺点：
- 不支持tree-shaking、热更新、代码分割等；
- gulp 对 js 模块化方案无能为力，只是对静态资源做流式处理，处理之后并未做有效的优化整合。
适用场景：
静态资源密集操作型场景，主要用于css、图片等静态资源的处理操作。
比较（和grunt）：
- 易用 。Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
- 高效 。Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
- 高质量。 Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。
- 易学。 Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。
- 流 。使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。
- 代码优于配置 。维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。
使用：
-
Grunt
Grunt 是一套前端自动化工具，帮助处理反复重复的任务。一般用于：编译，压缩，合并文件，简单语法检查等
特点：
- Grunt有一个完善的社区，插件丰富，根据社区的结果显示，共计3,439个插件，其中49个官方插件。
- 它简单易学，你可以随便安装插件并配置它们。许多常见的任务都有现成的Grunt插件，而且有众多第三方插件，如：
CoffeeScript，Handlebars，Jade，JsHint，Less，RequireJS，Sass，Styles。而且通过参考文档进行配置便可以使用。 - 你不需要多先进的理念，也不需要任何经验 。
使用：