模块解析

解析器是一个库，它有助于通过模块的绝对路径来定位模块。模块可以作为另一个模块的依赖被引入，例如：

import foo from 'path/to/module';
// or
require('path/to/module');

依赖模块可以来自应用程序代码或第三方库。解析器帮助 webpack 查找需要包含在 bundle 中的模块代码，以响应每个 require/import 语句。webpack 使用 enhanced-resolve 在打包模块时解析文件路径。

webpack 中的解析规则

使用 enhanced-resolve，webpack 可以解析三种类型的文件路径：

import '/home/me/file';

import 'C:\\Users\\me\\file';

由于我们已经有了文件的绝对路径，因此不需要进一步的解析。

import '../src/file1';
import './file2';

在这种情况下，import 或 require 发生的源文件所在目录被视为上下文目录。import/require 中指定的相对路径将与此上下文路径连接，以生成模块的绝对路径。

import 'module';
import 'module/lib/file';

模块会在 resolve.modules 中指定的所有目录中搜索。你还可以通过使用 resolve.alias 配置选项为其创建别名来替换原始模块路径。

如果包中包含 package.json 文件，则会按顺序查找 resolve.exportsFields 配置选项中指定的字段，package.json 中第一个这样的字段将根据包导出指南确定包的可用导出。

根据上述规则解析路径后，解析器会检查路径是指向文件还是目录。如果路径指向文件：

如果路径指向文件夹，则采取以下步骤来查找具有正确扩展名的文件：

如果文件夹包含 package.json 文件，则会按顺序查找 resolve.mainFields 配置选项中指定的字段，package.json 中第一个这样的字段将确定文件路径。
如果没有 package.json 或者 resolve.mainFields 没有返回有效路径，则会按顺序查找 resolve.mainFiles 配置选项中指定的文件名，以查看导入/引入的目录中是否存在匹配的文件名。
然后以类似的方式使用 resolve.extensions 选项解析文件扩展名。

Webpack 根据你的构建目标为这些选项提供了合理的默认值。

这遵循与文件解析相同的规则。但是，可以使用 resolveLoader 配置选项为加载器设置单独的解析规则。

每次文件系统访问都会被缓存，以便对同一文件的多次并行或串行请求能够更快地发生。在观察模式下，只有被修改的文件才会从缓存中清除。如果观察模式关闭，则在每次编译之前缓存都会被清除。

请参阅 Resolve API 以了解更多上述配置选项。

« 上一页