-
WebPack-11-依赖图(dependency graph)
依赖图(dependency graph)
每当一个文件依赖另一个文件时,webpack 都会将文件视为直接存在 依赖关系。这使得 webpack 可以获取非代码资源,如 images 或 web 字体等。并会把它们作为 依赖 提供给应用程序。
当 webpack 处理应用程序时,它会根据命令行参数中或配置文件中定义的模块列表开始处理。
从 入口 开始,webpack 会递归的构建一个...
2018-04-23 13:59:43 |
WebPack
-
WebPack-10-module-federation
Module Federation
动机
多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们。
这通常被称作微前端,但并不仅限于此。
底层概念
我们区分本地模块和远程模块。本地模块即为普通模块,是当前构建的一部分。远程模块不属于当前构建,并在运行时从所谓的容器加载。
加载远程模块被认为是异步操作。当使用远程模块时,这些异步操作将被...
2018-04-23 13:59:43 |
WebPack
-
WebPack-09-模块解析(Module Resolution)
模块解析(Module Resolution)
resolver 是一个帮助寻找模块绝对路径的库。
一个模块可以作为另一个模块的依赖模块,然后被后者引用,如下:
import foo from 'path/to/module';
// 或者
require('path/to/module');
所依赖的模块可以是来自应用程序的代码或第三方库。
resolver 帮助 webpac...
2018-04-23 13:59:43 |
WebPack
-
WebPack-08-modules 模块
模块(Modules)
在模块化编程中,开发者将程序分解为功能离散的 chunk,并称之为 模块。
每个模块都拥有小于完整程序的体积,使得验证、调试及测试变得轻而易举。
精心编写的 模块 提供了可靠的抽象和封装界限,使得应用程序中每个模块都具备了条理清晰的设计和明确的目的。
Node.js 从一开始就支持模块化编程。
然而,web 的 模块化 正在缓慢支持中。 在 web 界存在多...
2018-04-23 13:59:43 |
WebPack
-
WebPack-07-configration 配置
配置(Configuration)
你可能已经注意到,很少有 webpack 配置看起来完全相同。
这是因为 webpack 的配置文件是 JavaScript 文件,文件内导出了一个 webpack 配置的对象。
webpack 会根据该配置定义的属性进行处理。
由于 webpack 遵循 CommonJS 模块规范,因此,你可以在配置中使用:
通过 requir...
2018-04-23 13:59:43 |
WebPack
-
WebPack-06-plugin 插件
plugin
插件是 webpack 的 支柱 功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上!
插件目的在于解决 loader 无法实现的其他事。
Tip
如果在插件中使用了 webpack-sources 的 package,请使用 require(‘webpack’).sources 替代 require(‘webpack-so...
2018-04-23 13:59:43 |
WebPack
-
WebPack-05-loader
loader
loader 用于对模块的源代码进行转换。
loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。
因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的得力方式。
loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript 或将内联图像转换为 data URL。loade...
2018-04-23 13:59:43 |
WebPack
-
WebPack-04-输出(output)
输出(output)
可以通过配置 output 选项,告知 webpack 如何向硬盘写入编译文件。
注意,即使可以存在多个 entry 起点,但只能指定一个 output 配置。
用法
在 webpack 配置中,output 属性的最低要求是,将它的值设置为一个对象,然后为将输出文件的文件名配置为一个 output.filename:
webpack.config.js...
2018-04-23 13:59:43 |
WebPack