模块解析 Module resolution
-
resolver
是一个库(library),用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块,然后被后者引用,resolver 帮助 webpack 找到 bundle 中需要引入的模块代码,这些代码在包含在每个 require/import 语句中。如下:
import foo from 'path/to/module'
// 或者
require('path/to/module')
- webpack可以解析三种文件路径
- 绝对路径
import '/home/me/file';
import 'C:\\Users\\me\\file';
- 相对路径
import "../src/file1";
import "./file2";
- 模块路径
import "module";
import "module/lib/file";
依赖图 Dependency graph
webpack 可以接收非代码资源(non-code asset)(例如图像或 web 字体)作为依赖提供给app。从入口起点(命令行或配置文件中定义的一个模块列表)开始,webpack 递归地构建一个依赖图,这个依赖图包含着应用程序所需的每个模块,然后将所有这些模块打包为bundle - 通常只有一个 - 可由浏览器加载。
Runtime
主要是指:在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码。
runtime 包含:在模块交互时,连接模块所需的加载和解析逻辑。
包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑。
Manifest
当编译器(compiler)开始执行、解析和映射应用程序时,它会保留所有模块的详细要点。这个数据集合称为 "Manifest",当完成打包并发送到浏览器时,会在运行时通过 Manifest 来解析和加载模块。
无论你选择哪种模块语法,那些 import
或 require
语句现在都已经转换为 __webpack_require__
方法,此方法指向模块标识符(module identifier)。
通过使用 manifest 中的数据,runtime 将能够查询模块标识符,检索出背后对应的模块。