Webpack中文手册 pdf

所需积分/C币:50 2017-03-19 10:38:22 20.33MB PDF
收藏 收藏 2
举报

Webpack 中文手册 pdf 版
Introduction 上优程网,学优秀教程,做优秀程序员 这本书使用 Gitboeαk撰写并生成网站,请查看 package.json中的 scripts配置和 / scripts目录中的脚本来了解这本书的构建和发布过程。 /初始化 nodes依赖 S npm install ′安装 giftbook插件 S npm install gitbook-cl1-g s gitbook install ./content /启动 giftbook服务开始撰写工作 S npm run serve-gitbook /生成 giftbook s npm run generate-gitbook //生成Wiki S npm run generate-wik //发布到wiki s npm run deploy -wiki ′生成并发布,是上面3条命令的快捷方式,通常编辑内容后只需要进行这个操作 S npm run generate-and-deploy 更新日志 https:/github.com/zhaoda/webpack-handbook/commits/master 版权许可 Webpack中文指南由赵达创作,采用知识共享署名-非商业性使用4.0国际许可协议 进行许可。 前言 上优程网,学优秀教程,做优秀程序员 前言 介绍前端模块系统的演进历史,以及 Webpack岀现的背景及其特点。 模块系统 上优程网,学优秀教程,做优秀程序员 现状 伴随着栘动互联的大潮,当今越来越多的网站已经从网页模式进化到了 Webapp模式。 它们运行在现代的高级浏览器里,使用HTML5、CSS3、ES6等更新的技术来开发丰富 的功能,网页已经不仅仅是完成浏览的基本需求,并且 webapp通常是一个单页面应用 每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的 Java Script代码,这给前端开发的流程和资源组织带来了巨大的挑战, 前端开发和其他开发工作的主要区别,首先是前端是基于多语言、多层次的编码和组织工 作,其次前端产品的交付是基于浏览器,这些资源是通过增量加载的方式运行到浏览器 端,如何在开发环境组织好这些碎片化旳代码和资源,并且保证他们在浏览器端快速、优 雅的加载和更新,就需要一个模块化系统,这个理想中的模块化系统是前端工程师多年来 直探索的难题。 模块系统的演进 模块系统主要解决模块的定乂、依赖和导岀,先来看看已经存在的模块系统。 < script标签 <script src="module1is></script> <script src=module2is></script> <script src="library. js ></script> <script src=module3. js></script> 这是最原始的 Java Script文件加载方式,如果把毎—个文件看做是一个模块,那么他们的 接口通常是暴露在全局作用域下,也就是定义在 window对象中,不同模块的接口调用都 是一个作用域中,一些复杂的框架,会使用命名空间的概念来组织这些模块的接口,典型 的例子如YU库。 这种原始的加载方式暴露了一些显而易见的弊端: 全局作用域下容易造成变量冲突 文件只能按照< script>的书写顺序进行加载 ●开发人员必须主观解决模块和代码库的依赖关系 ◆在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪 模块系统 上优程网,学优秀教程,做优秀程序员 Common Js 服务器端的 Node. js遵循 CommonJs规范,该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports或 module. exports来导出需 要暴露的接口。 require( module") require(./file. js") exports. dostuff function(3; module exports somevalue 优点 ●服务器端模块便于重用 NPM中已经有将近20万个可以使用模块包 简单并容易使用 缺点 同步旳模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异 步加载的 ●不能非阻塞的并行加载多个模块 实现 服务器端的 Node. js Browser!y,浏览器端的 Commons实现,可以使用NPM的模块,但是编译打包后 的文件体积可能很大 modules-webmake,类似 Browserify,还不如 Browserif灵活 weq, Browserify的前身 AMD Asynchronous Module Definition规范其实只有一个主要接囗 define(id?, dependencies?, factor y),它要在声明模块的时候指定所有的依赖 dependencies,并且还要当做形参传 到 factory中,对于依赖的模块提前执行,依赖前置 define( module,[dep1,dep2], function(d1, d2)i return someExportedvalue i require([ module,..file"], function(module, file)[/ /}); 模块系统 上优程网,学优秀教程,做优秀程序员 优点 适合在浏览器环境中异步加载模块 ●可以并行加载多个模块 缺点: ◆提高了开发成本,代码的阋读和书写比较困难,模块定义方式的语乂不顺畅 ●不符合通用的模块化思维方式,是一种妥协的实现 实现: ● RequireS CMD Common module definition规范和AMD很相似,尽量保持简单,并与 Commons和 Node. js的 Modules规范保持了很大的兼容性。 define(function(require, exports, module)f var s= require(jquery )i var Spinning require(./spinning i exports. dosome thing module exports= 优点 ●依赖就近,延迟执行 可以很容易在 Node. js中运行 缺点 ●依赖SPM打包,模块的加载逻辑偏重 实现 ● Sea. js ● coolie UMD 模块系统 上优程网,学优秀教程,做优秀程序员 uniⅳ versal module definition规范类似于兼容 Common Js和AMD的语法糖,是模块定义 的跨平台解决方案。 ES6模块 EcmaScript6标准增加了 JavaScript语言层面的模块体系定义。ES6模块的设计思想, 是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输岀的变量。 CommonJs和AMD模块,都只能在运行时确定这些东西。 Importquery export function dostuff(t module "localModule"0 优点 容易进行静态分析 ●面向未来的 Ecma Script标准 缺点 ●原生浏览器端还没有实现该标准 全新的命令字,新版的 Node. js才支持 实现 ●Babe 期望的模块系统 可以兼容多种模块风格,尽量可以利用已有的代码,不仅仅只是 Javascript模块化,还有 CSS、图片、字体等资源也需要模块化。 前端模块加载 前端模块要在客户端中执行,所以他们需要增量加载到浏览器中。 模块的加载和传输,我们首先能想到两种极端的方式,一种是每个模块文件都单独请求, 另一种是把所有模块打包成一个文件然后只请求一次。显而易见,每个模块都发起单独的 请求造成了请求次数过多,导致应用启动速度慢;一次请求加载所有模块导致流量浪费、 初始化过程慢。这两种方式都不是好的解决方案,它们过于简单粗暴。 模块系统 上优程网,学优秀教程,做优秀程序员 分块传输,按需进行懒加载,在实际用到某些模块的时候再增量更新,才是较为合理旳模 块加载方案。 要实现模块旳按需加载,就需要—个对整个代码库中的模块进行静态分析、编译打包的过 程 所有资源都是模块 在上面的分析过程中,我们提到的模块仅仅是指 Java Script模块文件。然而,在前端开发 过程中还涉及到样式、图片、字体、HTML模板等等众多的资源。这些资源还会以各种方 言的形式存在,比如 coffeescript、less、sass、众多的模板库、多语言系统(i18n)等 等 如果他们都可以视作模块,并且都可以通过 require的方式来加载,将带来优雅的开发体 验,比如 require(./style. css"i require(./style.less)i require(./template, jade") require(./image. png ") 那么如何做到让 require能加载各种资源呢? 静态分析 在编译的时候,要对整个代码进行静态分析,分析岀各个模块的类型和它们依赖关系,然 后将不同类型的模块提交给适配的加载器来处理。比如一个用LESS写的样式模块,可以 先用LESS加载器将它转成一^CSS模块,在通过cSS模块把他插入到页面的 < style>标签中执行。 Webpack就是在这样的需求中应运而生。 同时,为了能利用已经存在的各种框架、库和已经写好的文件,我们还需要一个模块加载 的兼容策略,来避免重写所有的模块。 那么接下来,让我们开始 Webpack的神奇之旅吧 重复的轮子 上优程网,学优秀教程,做优秀程序员 什么是 Webpack Webpack是一个模塽打包器。它将根据模块的侬赖关系进行静态分析,然后将这些模块 按照指定的规则生成对应的静态资源。 coffee coffee . png png js less ess modules webpack static with dependencies MODULE BUNDLER assets 为什么重复造轮子 市面上已经存在的模块管理和打包工具并不适合大型的项目,尤其单页面Web应用程 序。最紧迫的原因是如何在一个大规模的代码库中,维护各种模块资源的分割和存放,维 护它们之间的依赖关系,并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态 资源。 这些已有的模块化工具并不能很好的完成如下的目标 ●将依赖树拆分成按需加载的块 ●初始化加载的耗时尽量少 ●各种静态资源都可以视作模块 ●将第三方库整合成模块的能力 可以自定义打包逻辑的能力 ●适合大项目,无论是单页还是多页的Web应用 Webpack的特点 10

...展开详情
试读 30P Webpack中文手册 pdf
立即下载 低至0.43元/次 身份认证VIP会员低至7折
    一个资源只可评论一次,评论内容不能少于5个字
    qiuguoqiang 有用,谢谢分享。
    2018-05-09
    回复
    大明哥哥 谢谢楼主分享,写的还是不错的
    2018-05-04
    回复
    aLIEz_web 一般般,还是看官网好了
    2018-03-16
    回复
    free__saber 谢谢楼主,先下载看看,学习学习
    2018-02-28
    回复
    女孩纸裙下到底有什么 写得还是很详细的
    2018-02-12
    回复
    ice_lance 这个是Webpack指南
    2017-12-21
    回复
    yu000hong 不如看官方网页
    2017-08-16
    回复
    dawnkeen 这个是Webpack指南
    2017-06-14
    回复
    关注 私信 TA的资源
    上传资源赚积分,得勋章
    最新推荐
    Webpack中文手册 pdf 50积分/C币 立即下载
    1/30
    Webpack中文手册 pdf第1页
    Webpack中文手册 pdf第2页
    Webpack中文手册 pdf第3页
    Webpack中文手册 pdf第4页
    Webpack中文手册 pdf第5页
    Webpack中文手册 pdf第6页
    Webpack中文手册 pdf第7页
    Webpack中文手册 pdf第8页
    Webpack中文手册 pdf第9页

    试读已结束,剩余21页未读...

    50积分/C币 立即下载 >