模块解析(Module Resolution)

解析器(resolver)是一个库,它有助于通过绝对路径定位模块。一个模块可以被另一模块作 为依赖项要求,如下所示:

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

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

Resolving rules in 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 配置选项为备用路径创建别名,以替换原始模块路径。

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

  • 如果路径中包含文件扩展名,则文件将直接打包。
  • 否则,使用 resolve.extensions 选项解析文件扩展名,该选项告诉解析器在解析时可以接受哪些扩展名(例如 .js,.jsx)。

如果路径指向文件夹,则执行以下步骤以查找具有正确扩展名的正确文件:

  • 如果文件夹包含 package.json 文件,则按顺序查找 resolve.mainFields 配置选项中指定的字段,package.json 中的第一个此类字段确定文件路径。
  • 如果没有 package.json 或者主字段并不返回一个有效的路径,则按顺序查找 resolve.mainFiles 配置选项中指定的文件名,以查看是否能在 imported/required 目录中匹配到一个存在的文件名。
  • 然后以类似于 resolve.extensions 选项使用的方式解析文件扩展名。

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

解析加载器

这遵循与文件解析指定的规则相同的规则。但 resolveLoader 配置选项可用于为加载器设置不同的解析规则。

缓存

每个文件系统访问都被缓存,因此对同一文件的多个并行或串行请求发生得更快。在 监视模式 下,只有被修改过的文件才会从缓存中排除。如果关闭监视模式,则在每次编译之前清除缓存。

请参阅 Resolve API 以了解有关上述配置选项的更多信息。