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。

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

推荐阅读更多精彩内容

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