webpack与grunt/gulp

1、webpack

    Webpack 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出他们的依赖关系，将它们打包为可部署的静态资源。

2、grunt/gulp

    自动化构建工具，就是用来代替手工执行机械重复的事情，解放我们的双手的。
    例如，项目使用 CoffeeScript/ES6代替Javascript，但浏览器对这些语言是不支持或者支持得不完整的，要让它在浏览器里运行起来就要执行以下操作：
（1）执行编译命令：xx.coffee->xx.js
（2）执行压缩丑化命令：xx.js->xx.min.js

    如果文件代码被修改，那么上面两条命令就要再执行一遍。同样的，也会有用Less写CSS，用Jade写HTML，用webpack/Browserify模块化、为非覆盖式部署的资源加MD5戳等等。自动化构建工具就是用来帮助我们完成这些重复而机械的工作的。

3、webpack与grunt/gulp

    不同职能的工具，可以配合使用

    官方对webpack的定位是模块打包器，而gulp/grunt属于构建工具。虽然webpack可以代替gulp的一些功能，但是很明显webpack和gulp/grunt不是一个职能的工具。webpack官方中给出了webpack with gulp/grunt的说明，两者可以配合共同服务于一个项目的。

相同点：都可用于项目打包，文件压缩，文件监测等功能。

不同点：

    两种工具的侧重点不同，webpack主要侧重于模块的打包，适合于单页面的项目，开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。gulp侧重于前端开发的工作流程，通过配置一系列的task，如less预编译等，然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。