目录
[2 vite](#2 vite)
[3 gulp](#3 gulp)
1.webpack
基本知识：
-
定义：webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会在内部构建一个依赖图(dependency graph)，该图会映射项目所需的每个模块，并生成一个或多个bundle。
-
核心功能：模块化打包、代码拆分、资源优化与压缩、自动化任务执行等。
运行机制：
-
入口点：webpack从配置文件中的入口点开始处理，这些入口点是应用程序的起始模块。
-
构建依赖关系图：webpack会分析入口点文件及其依赖的模块，递归地查找所有依赖，直到构建出完整的依赖关系图。
-
资源加载与转换：webpack使用加载器(loader)来处理模块，这些加载器可以定义如何加载、解析和转换各种资源（如JavaScript、CSS、图片等）。
-
打包输出：完成资源加载与转换后，webpack会将所有模块打包成一个或多个输出文件。
优势：
-
功能强大，支持多种加载器和插件。
-
社区活跃，有大量的第三方库和工具支持。
-
配置灵活，可以根据项目需求进行定制。
2 vite
基本知识：
-
定义：vite是一个面向现代浏览器和Node.js的现代前端构建工具，它利用原生ES模块导入功能来提供极快的冷启动和热模块更新（HMR）。
-
特点：轻量级、快速、支持现代前端框架（如Vue、React等）。
运行机制：
-
开发服务器：vite启动一个开发服务器，该服务器利用浏览器的原生ES模块导入能力来提供快速的模块热更新。
-
依赖预构建：对于第三方依赖，vite会在服务器启动时进行预构建，以提高后续的开发效率。
-
构建生产版本：在构建生产版本时，vite会进行代码优化、压缩和合并等操作，以生成适合生产环境的代码。
优势：
-
启动速度快，开发效率高。
-
支持现代前端框架，易于集成。
-
配置简单，上手快。
3 gulp
基本知识：
-
定义：gulp是一个基于流的自动化构建工具，它可以自动化地完成JavaScript的压缩、图片的优化、CSS的预处理等任务。
-
特点：使用流（stream）来处理文件，可以高效地处理大量文件。
运行机制：
-
任务定义：在gulp中，通过编写任务（task）来定义要执行的操作。
-
任务执行：通过命令行或编程方式触发任务执行，gulp会按照定义的任务顺序执行操作。
-
文件处理：在任务执行过程中，gulp使用流来处理文件，包括读取、转换和写入等操作。
优势：
-
使用流来处理文件，效率高。
-
配置灵活，易于扩展。
-
支持多种插件，可以方便地集成各种功能。