Webpack 和 gulp 的区别


首先 gulp 和 browserify / webpack 不是一回事

gulp应该和grunt比较。它们的区别就暂时不提了。gulp / grunt 是一种构建工具,能够优化前端的工程流,比如自动刷新页面,combo, 压缩css, js, 编译less等等。简单来说,就是使用gulp和grunt, 然后配置你需要的插件,就可以把以前需要手工做的事情让它帮你做了。

browserify / webpack,还有seajs / requirejs 这四个都是JS模块化的方案。其中seajs/ requirejs是一种类型, browserify / webpack 是另一种类型。

  • seajs/ require: 是一种在线“编译”模块的方案,相当于在页面上加载一个CMD/AMD 解释器。这样浏览器就认识了 define、exports、module这些东西。也就实现了模块化。

  • broserify / webpack: 是一个预编译模块的方案,相比于上面,这个方案更加智能。以webpack为例:首先它是预编译的,不需要再浏览器中加载解释器。另外,你在本地直接写JS, 不管是AMD / CMD / ES6 风格的模块化, 它都能认识。并且编译成浏览器认识的JS。

总结:gulp是一个工具,而webpack等等是模块化方案。gulp可以配置seajs、requirejs甚至webpack的插件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一直在使用,也没时间说,今天来介绍下gulp 和webpack的安装使用还有就是区别 首先先明白gulp和webp...
    一点代码阅读 421评论 0 0
  • webpack和browserify的区别 一、 选择不同的前端构建工具,也就意味着不同的前端开发体系。只要业务足...
    shanshanfei阅读 3,075评论 0 5
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,483评论 1 32
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,321评论 4 31
  • 在我刚接触前端开发的时候,已经开始流行各种构建工具了;而当我上手gulp以后,webpack又大行其道了。所以,对...
    悟空leo阅读 1,178评论 0 2