共计 894 个字符，预计需要花费 3 分钟才能阅读完成。
随着前端发展如日冲天，前端项目也越来越复杂，得益于 Nodejs 的发展，前端模块化、组件化、工程化也大势所趋。这些年 Grunt、Gulp 到 Webpack 随着工程化的发展都大行其道。
前端工程化的早期，主要是解决重复任务的问题。Grunt、Gulp 就是其中代表。比如: 压缩、编译 less、sass、地址添加 hash、替换等。
Grunt 官网中就说：
对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting 等，完成大部分无聊的工作。
而如今的 Webpack 更像 一套前端工程化解决方案。利用强大插件机制，解决前端静态资源依赖管理的问题。
Webpack 作者 Tobias 回复与 Grunt Gulp NPM 脚本的比较
Tobias： NPM 脚本对我而言足矣。实际上，说 webpack 是 Grunt/Gulp 的替代器并不完全准确。Grunt 和 Gulp 以及 NPM 脚本都是 任务执行程序 。
Webpack 是_ 模块打包程序 _。这两类程序的目标不一样。但 webpack 简化了必须“过度使用”Grunt 和 Gulp 和 NPM 脚本才能实现的 Web 开发任务也是事实。NPM 脚本才是 Grunt 和 Gulp 的替代品。
不过，除了纯粹的构建之外，任务运行程序也有存在的理由，比如部署、代码检查、版本管理，等等。
Webpack 与 Grunt、Gulp 运行机制
# grunt gulp 思路【遍历源文件】->【匹配规则】->【打包】做不到按需加载，对打包的资源，是否用到，打包过程不关心。# webpack【入口】->【模块依赖加载】->【依赖分析】->【打包】在加载、分析、打包的过程中，可以针对性的做一些解决方案。比如：code split(拆分公共代码)Grunt 与 Gulp 性能比较
Grunt: 每个任务处理完成后存放在本地磁盘.tmp 目录中，有本地磁盘的 I / O 操作，会导致打包速度比较慢。
Gulp: gulp 与 grunt 都是按任务执行，gulp 有一个文件流的概念。每一步构建的结果并不会存在本地磁盘，而是保存在内存中，下一个步骤是可以使用上一个步骤的内存，大大增加了打包的速度。
参考：
grunt 官网
webpack 作者接受参访文章