素材巴巴 > 程序开发 >

webpack和gulp的区别

程序开发 2023-09-03 15:55:25

webpack和gulp的区别是什么?
这是一个前端面试经常会有的面试题,当然也是很多人的疑问,那下面就简单说一下吧!

Gulp:

gulp 致力于 自动化和优化 你的工作流,它是一个自动化你开发工作中 痛苦又耗时任务 的工具包。

侧重于整体过程的控制管理。通过定义许多task来执行构建任务,使用起来更像是任务流。
因此他的任务定义和管理是webpack所没有的。

特点:

工作流程:
gulp

Webpack:

webpack有人也称之为 模块打包机 ,由此也可以看出webpack更侧重于模块打包。
我们可以把开发中的所有资源(js文件、css文件、图片、字体等)都可以看成模块。
最初webpack本身就是为前端JS代码打包而设计的,后来被扩展到其他资源的打包处理。
webpack是通过 loader(加载器)plugins(插件) 对资源进行处理的。

根据entry和模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
webpack中对资源文件的处理是通过入口文件产生的依赖形成的,不会像gulp那样,配置好路径后,该路径下所有规定的文件都会受影响。

特点:

工作流程:
webpack
结论:
gulp通过stream来构建应用,而在webpackbundle由多个不同的chunk组成,这样通过缓存chunk并比对修改可以达到更快速的编译。配合code splitting 可将代码分离到每个bundles/chunks中实现按需加载。

GulpWebpack工作方式基于流的自动化构建工具基于入口和模块的打包工具核心概念任务(task)入口(entry)
输出(output)
加载器(loader)
插件(plugins)

其实总结了一下可以看出 webpackgulp 他们都是前端的构建管理工具,但是他们的工作方式不同,实质上并没有真正的可比性,只是针对某些方面,谁能更胜一筹而已。


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。