您的位置:极速下载站 → 电脑软件 → 教育教学 → 电子文档 → Webpack 2.2 参考手册
Webpack 是比较热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
webpack已经是大部分前端项目打包工具的首选,grunt、glup、browserify等逐渐沦为辅助甚至完全被替代。在grunt、glup、browserify等已经相当火了之后,webpack长江后浪推前浪,把前辈们拍死在沙滩上,实力惊人。
根据GitHub上的迭代发展看来,通过Issues、Release、Commit等看,webpack发展相当不错,已经有2.2版本,比较大的更新应该是支持ES6 Modules,根据ES6的特性来做一些Code Splitting等。
老式的任务运行器的方式:你的标记、样式和 JavaScript 是分离的。你必须分别管理它们每一个,并且你需要确保每一样都达到产品级
任务运行器(task runner),例如 Gulp,可以处理许多不同的预处理器(preprocesser)和转换器(transpiler),但是在所有的情景下,它都需要一个输入源并将其压缩到一个编译好的输出文件中。然而,它是在每个部分的基础上这样做的,而没有考虑到整个系统。这就造成了开发者的负担:找到任务运行器所不能处理的地方,并找到适当的方式将所有这些模块在生产环境中联合在一起。
Webpack 试图通过提出一个大胆的想法来减轻开发者的负担:如果有一部分开发过程可以自动处理依赖关系会怎样?如果我们可以简单地写代码,让构建过程比较终只根据需求管理自己会怎样?
Webpack 的方式:如果 Webpack 了解依赖关系,它会仅捆绑我们在生产环境中实际需要的部分
如果你过去几年一直参与 web 社区,你已经知道解决问题的首选方法:使用 JavaScript 来构建。而且 Webpack 尝试通过 JavaScript 传递依赖关系使得构建过程更加容易。不过这个设计真正的亮点不是简化代码管理部分,而是管理层由 100% 有效的 JavaScript 实现(具有 Nodejs 特性)。Webpack 能够让你编写有效的 JavaScript,更好更全面地了解系统。
换句话来说:你不需要为 Webpack 写代码。你只需要写项目代码。而且 Webpack 就会持续工作(当然需要一些配置)。
简而言之,如果你曾经遇到过以下任何一种情况:
* 载入有问题的依赖项
* 意外引入一些你不需要在生产中用上的 CSS 样式表和 JS 库,使项目膨胀
* 意外的两次载入(或三次)库
* 遇到作用域的问题 —— CSS 和 JavaScript 都会有
* 寻找一个让你在 JavaScript 中使用 Node/Bower 模块的构建系统,要么就得依靠一个令人发狂的后端配置才能正确地使用这些模块
* 需要优化资产asset交付,但你担心会弄坏一些东西
第一部分:概念
Webpack 概述
入口起点(Entry Points)
输出(Output)
加载器(Loaders)
插件(Plugins)
构建目标(Targets)
模块(Modules)
模块解析(Module Resolution)
模块热替换(Hot Module Replacement)
配置(Configuration)
依赖图表(Dependency Graph)
第二部分:指南
安装
起步
从 v1 迁移到 v2
Authoring Libraries
Shimming
Tree Shaking
Webpack 和 Typescript
处理兼容
代码拆分 - CSS
代码拆分 - 库(Libraries)
代码拆分 - 使用 require.ensure
代码拆分(Code Splitting)
惰性加载 - React
改善构建性能
公共路径(Public Path)
管理依赖
缓存(Caching)
开发
开发 - Vagrant
模块热替换 - React
生产环境构建
整合 task/test (任务/测试)运行器
整合 task/test (任
第三部分:文档
API
配置
加载器
插件
开发