Webpack与Gulp、Grunt没有什么可比性,它可以看作模块打包机,通过分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

  他们的工作方式也有较大区别:

  Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。

  Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

Webpack与Gulp、Grunt区别的更多相关文章

  1. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  2. webpack和gulp的区别

    Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...

  3. webpack与gulp的区别及实例搭建

    webpack是什么,提到这个概念,很多人可能立马说出来,模块化加载器兼打包工具,可以把各种资源都作为模块来使用和处理等等. 说到前端构建工具,不可避免的会提到gulp,到底webpack和gulp有 ...

  4. 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、Git/SVN)

    一. 各类概念和指令介绍 1. NVM (1).  全称:Node Version Manager,是一款针对Nodejs的版本管理工具,由于Node的版本很多,很多时候我要需要依赖多个版本,并且要求 ...

  5. webpack与gulp的区别

    gulp是工具链.构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 webpack是文件打包工具,可以把项目的各种js. ...

  6. gulp/grunt和browserify/webpack的区别

    Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...

  7. webpack gulp grunt 简单介绍

    本文主要是讲下webpack的相关知识点,理论比较多,因为webpack的功能非常强大,说到的也基本都是经常用到的. 这三个工具都属于前端自动化的工具,都是第三方的,并且国内很多大型团队也都有自己成熟 ...

  8. Gulp和webpack的作用和区别

    gulp是工具链.构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 webpack是文件打包工具,可以把项目的各种js文 ...

  9. Webpack和Gulp对比

    Webpack和Gulp对比 作者 彬_仔 关注 2016.10.19 22:42* 字数 8012 阅读 2471评论 18喜欢 68 在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并 ...

随机推荐

  1. (2)C#工具箱-公共控件2

    1.MaskedTextBox 限制填写数据格式的文本框 2.MonthCalendar 用法和DateTimePicker相同 日历 3.NotifIcon (1)添加此控件后,此界面运行时会弹出用 ...

  2. 牛客小白月赛3 F 异或【区间交集】

    链接:https://www.nowcoder.com/acm/contest/87/F 来源:牛客网 题目描述 Cwbc想测试一下他的加密协议,以便防止其他人偷看他给XHRlyb的信. Cwbc提出 ...

  3. 洛谷 P1064 金明的预算方案【有依赖的分组背包】

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱 ...

  4. Codeforces Round #445 C. Petya and Catacombs【思维/题意】

    C. Petya and Catacombs time limit per test 1 second memory limit per test 256 megabytes input standa ...

  5. Python的工具包[0] -> numpy科学计算 -> numpy 库及使用总结

    NumPy 目录 关于 numpy numpy 库 numpy 基本操作 numpy 复制操作 numpy 计算 numpy 常用函数 1 关于numpy / About numpy NumPy系统是 ...

  6. CV2

    Education 2008-09 - 2012-07  Xian Peihua University English  Junior CollegeTarget Jobs:  Project Man ...

  7. luogu P1494 岳麓山上打水

    题目描述 今天天气好晴朗,处处好风光,好风光!蝴蝶儿忙啊,蜜蜂也忙,信息组的同学们更加忙.最近,由于XX原因,大家不得不到岳麓山去提水.55555555~,好累啊. 信息组有一个容量为q升的大缸,由于 ...

  8. tiny4412 串口驱动分析一 --- u-boot中的串口驱动

    作者:彭东林 邮箱:pengdonglin137@163.com 开发板:tiny4412ADK+S700 4GB Flash 主机:Wind7 64位 虚拟机:Vmware+Ubuntu12_04 ...

  9. 使用PM2守护Nodejs命令行程序

    介绍 pm2是nodejs的一个带有负载均衡功能的应用进程管理器的模块,类似有Supervisor,forever,用来进行进程管理. 一.安装: <pre>npm install pm2 ...

  10. Android 常驻与很驻型广播的差别,及ListView优化,Android新手基本知识巩固

    1.常驻型广播  常驻型广播,当你的应用程序关闭了,假设有广播信息来,你写的广播接收器相同的能接受到.  他的注冊方式就是在你的应用程序中的AndroidManifast.xml进行注冊. 通常说这样 ...