请比较 Webpack 与 Grunt、Gulp 这两类前端构建工具的差异，并分别阐述它们各自的优缺点。

回答思路

1. 【回答框架 1】构建工具主要分为任务运行器和模块打包器两类。Grunt 和 Gulp 属于任务运行器，核心是定义任务流，如压缩、合并、校验等；Webpack 是模块打包器，核心是模块依赖图，将项目中所有资源作为模块统一处理。
2. 【回答框架 2】Grunt 通过配置文件（Gruntfile）声明任务和依赖，缺点是需要创建大量临时文件，任务间传递数据依靠文件系统，速度较慢；优点是配置驱动，职责单一，插件生态丰富。
3. 【回答框架 3】Gulp 基于 Node 流（stream），通过代码（gulpfile）定义任务，使用管道（.pipe）串联操作，减少临时文件读写，构建速度比 Grunt 快；优点是代码简洁，基于流的内存处理更高效。
4. 【回答框架 4】Webpack 的优点是模块化能力强大，支持代码分割（code splitting）、懒加载（lazy loading）、tree shaking（摇树优化）等，可通过 loader 处理各类资源，通过 plugin 扩展功能，适合复杂单页应用；缺点是配置相对复杂，学习曲线较陡，对于简单任务可能过重。
5. 【回答框架 5】三种工具有各自适用场景：如果项目主要是简单的文件操作任务，Gulp 较轻量高效；如果项目是大型应用，有复杂的模块依赖和优化需求，Webpack 更合适；Grunt 现在使用较少，但仍有老项目维护。
6. 【关键点 1】Grunt 是配置驱动，基于文件，慢；Gulp 是流式编程，基于内存，较快。
7. 【关键点 2】Webpack 是模块打包器，构建模块依赖图，支持代码分割和 tree shaking。
8. 【关键点 3】选择依据：项目规模和复杂度，简单任务用 Gulp，大型应用用 Webpack。
9. 【易错点 1】认为 Gulp 完全替代 Grunt，实际上两者都是任务运行器，但 Gulp 更现代。
10. 【易错点 2】混淆 loader 和 plugin 的角色：loader 用于转换模块，plugin 用于扩展功能。
11. 【易错点 3】忽略 Webpack 的配置复杂度，可能导致维护成本高。