Webpack与Grunt、Gulp的区别？

随着前端发展如日冲天，前端项目也愈来愈复杂，得益于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做者接受参访文章