常有人拿gulp与webpack来比较，知道这两个构建工具功能上有重叠的地方，可单用，也可一起用，但本质的区别就没有那么清晰。 ## Gulp gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。 *PS：简单说就一个Task Runner，就是用来跑一个一个任务的* 问题：没发解决的是 js module 的问题，是你写代码时候如何组织代码结构的问题. ## Webpack webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。 *PS：webpack is a module bundle* ## 相同点与不同点 **相同点**：文件合并与压缩（css,js），sass/less预编译，启动server，版本控制。 **不同点** 虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。 gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。 webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。