webpack是什么?和其他同类型工具比有什么优势?

官方文档: webpack 的 MOTIVATION

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler),将有依赖关系的模块打包成静态资源。

现存的模块打包器,不太适合大型项目(比如单页应用),以及在代码拆分和静态资源配合度不高。

目前有多种不同的规范和标准用来定义依赖和输出:

  • <script> 标签 (不存在模块系统)
  • CommonJS
  • AMD 和一些民间版本
  • ES6 模块系统
  • .....

他们各有优缺,比如 <script> 标签最简单,但是不存在模块系统,js 脚本过多的时候,很难保证正确的加载顺序,以及全局对象的之间的冲突,因为是挂在window对象下执行的;

CommonJS 呢,是同步加载依赖模块并能对外暴露出接口,使用简单,npm 上有很多现成的优秀模块,但因为CommonJS 是同步的,因此不能同时请求多个模块,适合用在服务器端,但就不适合客户端的网络请求了,因为网络请求需要是异步的,否则会造成阻塞,页面假死,用户等待过久....;

AMD呢,专为解决异步加载而出现的,可以同时异步请求多个模块,但是缺点是代码过重,书写阅读繁琐,比如requirejs 的实现,需要先加载requirejs,否则 define,require 等用来定义模块,加载模块的名词,浏览器是不认识的;

ES6 的模块系统,代码清晰,静态分析容易,而且是写入到ES标准中,这是未来的趋势,但是目前的浏览器支持度还不是特别普及,毕竟有些用户在使用旧版本浏览器。

这时候 webpack 出来了,并不是要取代这些模块,以及已有的代码需要进行大改动,而是包容了一切,让开发者们继续自行选择其惯用的模块风格,只需要通过 webpack 进行打包,曾经的代码依然可以良好的工作。

此外,在模块传输中,有两个极端的例子:

  • 一个模块用一个请求
  • 多个模块用一个请求

前者可以按需加载,但是需要的请求过多时,启动就变得缓慢,推迟;而后者一次性请求所有模块,减少了请求数,但是暂时用不到的模块也一并传输,造成了带宽浪费。

而 webpack 自然就采用了折中的法子,编译所有模块时,将彼此关系密切的模块打包在一起,因此多个模块被分割成若干个小包,形成多次小请求,模块包可以按需加载,比如一个多页面网站,不同页面其实有很多公共的代码块,这时就可以优先加载,其他的按需加载。

至于代码如何分割,取决于开发者。

另外 webpack 野心很大,凭什么模块系统只对 javascript 进行模块化打包, 其实 css 样式、图片、网络字体、html模板 ..... 都可以模块化打包, 以及 类似 coffeescript 、elm、less、jade template等等都可以交给 webpack 来输出标准的 三大件:html css javascript。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,025评论 0 21
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,424评论 1 32
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,269评论 4 31
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,663评论 7 110
  • 感性认识 Blob就是为js提供操作二进制数据的对象 应用场景可以是:分段上传 参考文献 http://www.c...
    清水芦苇阅读 615评论 0 1