面试题之gulp与webpack区别

面试题中离不开webpack，面试官很喜欢问你关于webpack知识点。
例如你有没有用webpack做过脚手架啊 gulp跟webpack关系等
现在就gulp跟webpack关系扯一扯

相同点：都是前端自动化的构建工具
不同点：

• gulp强调工作流程（对于模块化并没有进行强调）
• webpack前端模块化开发的解决方案 强调模块化、压缩合并、预处理等都是它的附带功能

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中所有的资源（图片、js文件、css资源）通过loader(加载器)和plugins(插件)对资源进行处理，打包成符合生产环境部署的前端资源。
主要特点：

1. 打包工具
2. 模块化识别
3. 编译模块代码方案

webpack能干啥？

1. 打包：将多个js文件打包成一个文件 （1.减少Http请求 2.压缩页面的空格从而减轻服务器压力）
2. 转换：把扩展的语法转换成普通js , 目的就是让浏览器正常解析运行代码
3. 优化：复杂的开发流程 、进行模块化打包、去空格、压缩混淆、减少http请求等

webpack在打包的时候，依靠依赖关系图，在打包的时候需要告知webpack两个概念：入口和出口
一般情况下，我们需要使用webpack.config.js进行配置

---

gulp强调工作流程，通过task方法设置一个个的任务（例如文件压缩、合并、启动server等） gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作 主要功能有：

1. 构件工具
2. 自动化
3. 提高效率

所以定义和用法上来说 都不是一种东西，无可比性 ，更不冲突！【当然，也有相似的功能，比如合并，区分，但各有各的优势】

结合网上的一些理解
gulp解释图：

webpack解释图：

---

Gulp应该和Grunt比较，他们的区别我就不说了，说说用处吧。Gulp / Grunt 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。
说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。

• seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。
• browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

了解更多的话点击这跳转到官网