简单理解gulp和webpack的区别

Posted MaxLucio---大张

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单理解gulp和webpack的区别相关的知识,希望对你有一定的参考价值。

Gulp和Webpack的基本区别:

gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加快请求速度和减少请求次数;并且gulp有task定义处理事务,从而构建整体流程,它是基于流的自动化构建工具。

Webpack是前端构建工具,实现了模块化开发和文件处理。他的思想就是“万物皆为模块”,它能够将各个模块进行按需加载,不会导致加载了无用或冗余的代码。所以他还有个名字叫前端模块化打包工具。

就我而言,我在实际当中会将两种都选择混合使用。虽然两个都可以进行代码的压缩合并减少代码体积,但gulp.config.js中gulp的代码更加简单易懂,需要压缩合并谁就用哪个方法,而webpack样式合并需要在node环境下下载插件才能使用。另一点,gulp 是基于流的打包工具,需要谁,引用谁,并且他的压缩简单明了,后期维护起来方便,webpack则可以将具体的模块进行划分,需要哪个模块就加载哪个模块,实现按需加载,并且排除掉冗余代码,减少代码体积。

总结起来就是,gulp是基于流的自动化构建工具,但不包括模块化的功能,如果要用到的话,就需要引入外部文件,比如require.js等;而webpack是自动化模块打包工具,本身就具有模块化,并且也具有压缩合并的功能。二者侧重点不同,我认为相互结合使用会提高代码质量和代码的优化。

 

------------------------------------------------------------------------------

很难受,其实我也不清楚二者那个好那个坏,和个人使用习惯有关,和,也不知道写的对不对,请批评指正,我还是个小白。。。

以上是关于简单理解gulp和webpack的区别的主要内容,如果未能解决你的问题,请参考以下文章

gulp和webpack的区别,是一种工具吗?

Gulp和webpack的区别,是一种工具吗?

Gulp和Webpack工具的区别

Gulp和Webpack工具的区别

webpack和gulp的区别

gulp与webpack的区别