Webpack2 中文文档 pdf

所需积分/C币:50 2017-03-19 10:44:31 23.16MB PDF
收藏 收藏 1
举报

webpack 2 中文文档 pdf
上优程网,学优秀教程,做优秀程序员 Watch和 WatchOptions 1.5.11 扩展( Externals) 1.5.12 Node 1.5.13 性能( Performance) .5.14 统计( Stats) 1.5.15 其他选项( Other Options) 1.5.16 环境( Environment) 1.5.17 webpack概述 上优程网,学优秀教程,做优秀程序员 webpack概述 bundle your assets Js jS hbs Is CSS ====m== ts css Jpg pg.png sass STATIC ASSETS sass MODULES WITH DEPENDENCIES 文档部分翻译内容来自:https:/github.com/webpack- china/webpack js. org Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松 散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按 需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs模块、AMD模 块、ES6模块、CSS、图片、JSON、 Coffeescript、LESS等, webpack已经是大部分前端项目打包工具的首选, grunt、gup、 browserify 等逐渐沦为辅助甚至完全被替代。在 grunt、gυp、 browserify等已经相当火 了之后, webpack长江后浪推前浪,把前辈们拍死在沙滩上,实力惊人 根据 Github上的迭代发展看来,通过 Issues、 Release、 Commit等看, webpack发展相当不错,已经有22版本,最大的更新应该是支持ES6 Modules,根据ES6的特性来做一些 Code splitting等。 老式的任务运行器的方式:你的标记、样式和 Java Script是分离的。你必须 分别管理它们每一个,并且你需要确保每一样都达到产品级 webpack概述 上优程网,学优秀教程,做优秀程序员 任务运行器( task runner),例如Gulp,可以处理许多不同的预处理器 ( preprocessor)和转换器( transpire,但是在所有的情景下,它都需要一个输 入源并将其压缩到一个编译好的输出文件中。然而,它是在每个部分的基础 上这样做的,而没有考虑到整个系统。这就造成了开发者的负担:找到任务 运行器所不能处理的地方,并找到适当的方式将所有这些模块在生产环境中 联合在一起。 Webpack试图通过提出一个大胆的想法来减轻开发者的负担:如果有一部分 开发过程可以自动处理依赖关系会怎样?如果我们可以简单地写代码,让构 建过程最终只根据需求管理自己会怎样? Webpack的方式:如果 Webpack了解依赖关系,它会仅捆绑我们在生产环 境中实际需要的部分 如果你过去几年一直参与web社区,你已经知道解决问题的首选方法:使用 JavaScript来构建。而且 Webpack尝试通过 JavaScript传递依赖关系使得 构建过程更加容易。不过这个设计真正的亮点不是简化代码管理部分,而是 管理层由100%有效的 JavaScript实现(具有 Nodes特性)。 Webpack能 够让你编写有效的 Java script,更好更全面地了解系统。 换句话来说:你不需要为 Webpack写代码。你只需要写项目代码。而且 Webpack就会持续工作(当然需要一些配置)。 简而言之,如果你曾经遇到过以下任何一种情况 载入有问题的依赖项 意外引入一些你不需要在生产中用上的CSS样式表和Js库,使项目膨 胀 意外的两次载入(或三次)库 遇到作用域的问题——CSS和 Java Script都会有 ·寻找一个让你在 Java Script中使用 Node/bower模块的构建系统,要么 就得依靠一个令人发狂的后端配置才能正确地使用这些模块 需要优化资产 asset交付,但你担心会弄坏一些东西 等等 webpack概述 上优程网,学优秀教程,做优秀程序员 那么你可以从 Webpack中收益了。它通过让 JavaScript轻松处理你的依赖 关系和加载顺序,而不是通过开发者的大脑。最好的部分是, Webpack甚至 可以纯粹在服务器端运行,这意味着你还可以使用 Webpack构建渐进增强 式网站 概念 上优程网,学优秀教程,做优秀程序员 概念 webpacκ是一个现代的 JavaScript应用程序的模块打包器( module bund/er)。它有着难以置信的配置,然而,我们认为你必须在开始前先了解 四个核心概念! 作为您的 webpack学习旅程的一部分,我们写这篇文档目的在于向你传递这 些概念的高度概述,同时仍然提供特定概念的相关用例 入口( Entry) webpack将创建所有应用程序的依赖关系图表 dependency graph)图表的 起点被称之为入口起点 entry poir)。入囗起点告诉 webpack从哪里开始, 并遵循着依赖关系图表知道要打包什么。可以将您应用程序的入口起点认为 是根上下文( ontextual root)或app第一个启动文件。 在 webpack中,我们使用 webpack配置对象 webpack configuration object) 中的 entry属性来定义入口。 接下来我们看一个最简单的例子: webpack config. js module, exports =t entry: ./path/to/my/entry/file. 这里有多种方式声明应用程序所需的特定 entry属性。 了解更多! 出口( Output) 概念 上优程网,学优秀教程,做优秀程序员 将所有的资源( assets)拢在一起后,我们还需要告诉 webpack在哪里打包 我们的应用程序。 webpack的 output属性描述了如何处理归拢在一起的 代码( bundled code)。 webpack config js var path= require( path') modu⊥e. expor ts entry:./path/to/my/entry/file.js output: i path: path. resolve( dirname, dist) filename:my -first-Webpack bundle js 在上面例子中,我们正在通过 output. filename和 output.path属性来 描述 webpack bundle的名称,以及我们想要生成(emit在哪里。 你可能看到项目生成( emitted或em贯穿我们整个文档和插件AP 它是“生产( produced)或排放( discharged)”的特殊术语。 output属性还有更多可配置的特性,但让我们花一些时间先了解一些 output属性的最常见的用例。 了解更多 加载器( Loader) webpack的目标是,让 webpack聚焦于项目中的所有资源( asset),而浏览 器不需要关注考虑这些(这并不薏味着资源( asset)都必须打包在一起)。 webpack把每个文件(css,html,scss,jpg,etc.)都作为模块处理。而且 webpack只理解 Javascript webpack loader会将这些文件转换为模块,而转换后的文件会被添加到依 赖图表中。 概念 上优程网,学优秀教程,做优秀程序员 在更高层面, webpack的配置有两个目标。 1.识别出 (identi!y)应该被对应的 loader进行转换 transform)的那些文件 2.由于迸行过文件转换,所以能够将被转换的文件添加到依赖图表(并且 最终添加到 bundle中)(use属性) webpack contig s var path= require( path '); const config =t entry:./path/to/my/entry/file.js output: I path: path. resolve( dirname dist ) filename:'my-first-webpack bundlejs module: i rules: test:八\.(jS|js×)$/,Use:"babe1-1 oader"} module exports config: 以上配置中,我们对一个单独的 module对象定义了 rules属性,里面包 含两个必须属性:test和use。这可以告诉 webpack compiler如下 “嘿, webpack compiler,当你碰到「在 require()/ import语句中 被解析为'js或'jsx'的路径」时,在你把它们添加并打包之前,要先 使用babe1- loader去转换”。 重要的是要记得,在 webpack配置中定义 loader时,要定义在 module.rues中,而不是ru1es。在定义错时 webpack会提出 重的警告。 我们还有尚未提到的 oader,可以设定更多特定属性。 概念 上优程网,学优秀教程,做优秀程序员 了解更多! 插件( Plugins) 由于 loader仅在每个文件的基础上执行转换,而插件( plugins)最常用于 (但不限于)在打包模块的" compilation”和αchunκ"生命周期执行操作和自定 义功能(查看更多)。 webpack的插件系统极其强大和可定制化。 由于你可以在一个配置多次使用插件用于不同的目的想要使用一个插件,你 只需要reqμuire()它,然后把它添加到 plugins数组中。多数插件可以 通过选项 option)自定义。由于需要在一个配置中,多次使用一个插件,来针 对不同的目的,因此你需要使用new来创建插件的实例,并且通过实例来 调用插件, webpack config js const HtmIWebpackPlugin= require(html-webpack-plugin i//i stalled via npm const webpack require(webpack i//to access built-in plug Ins const path require(pathi const config =f entry:./path/tomy/entry/file.js, output: path: path. resolve dirname ,'dist) filename: my -first-Webpack bundle js module: I rules ttest:八\.(js|jS×)$/,Use:"babe1-10ader' plugins: D new webpack optimize. UglifyJsPlugin(, new HtmIWebpackPlugin(itemplate:./src/index. html 10

...展开详情
试读 127P Webpack2 中文文档 pdf
立即下载 低至0.43元/次 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
zlf470 很好,很实用
2019-02-13
回复
XuYangbo 很实用,可以一看
2018-01-11
回复
king413125808a 很实用,可以一看
2017-10-02
回复
yuuucheng 很實用喔 感謝上傳
2017-03-19
回复
关注 私信 TA的资源
上传资源赚积分,得勋章
最新推荐
Webpack2 中文文档 pdf 50积分/C币 立即下载
1/127
Webpack2 中文文档 pdf第1页
Webpack2 中文文档 pdf第2页
Webpack2 中文文档 pdf第3页
Webpack2 中文文档 pdf第4页
Webpack2 中文文档 pdf第5页
Webpack2 中文文档 pdf第6页
Webpack2 中文文档 pdf第7页
Webpack2 中文文档 pdf第8页
Webpack2 中文文档 pdf第9页
Webpack2 中文文档 pdf第10页
Webpack2 中文文档 pdf第11页
Webpack2 中文文档 pdf第12页
Webpack2 中文文档 pdf第13页
Webpack2 中文文档 pdf第14页
Webpack2 中文文档 pdf第15页
Webpack2 中文文档 pdf第16页
Webpack2 中文文档 pdf第17页
Webpack2 中文文档 pdf第18页
Webpack2 中文文档 pdf第19页
Webpack2 中文文档 pdf第20页

试读结束, 可继续阅读

50积分/C币 立即下载 >