Gulp和Webpack的区别

转自：
作者：2197
来源：CSDN
原文：https://blog.csdn.net/qq_41047322/article/details/81706061

---

gulp： 强调的是前端开发的流程，通过配置一系列的task，定义task处理的事务（例如：文件压缩合并，启动server），然后定义执行顺序，来让gulp执行task，从而构建其前端项目的流程。合并后仍然是你写的代码，只是局部变量名被替换，一些语法做了转换而已，整体内容并没有发生改变。

webpack： 侧重模块打包，把开发中的所有资源（图片，js文件，css文件等）都开成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。打包后的代码已经不只是你写的代码，其中夹杂很多webpack自身的模块处理代码。

他们的定位是不同的：gulp来说，他旨在规范前端开发流程；webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

使用： 除了前端模块化开发，模块之间充分依赖的项目，都不值得webpack去构建；除此之外的构建工作都应该交给gulp，目前大一点的项目，webpack和gulp都是同时存在的，只是各自负责擅长的那部分，比如webapck将模块，互相依赖的分散的代码打包成数个文件，然后在使用gulp任务去压缩，加版本号，替换等等工作。