模块解析

webpackjsorg-main核心概念

title: 模块解析
sort: 7
contributors:

解析器（resolver）是一个帮助通过模块的绝对路径定位该模块的库。
一个模块可以作为另一个模块的依赖被引入，例如：

js 复制代码

import foo from "path/to/module";

// 或者

require("path/to/module");

依赖模块可以来自应用代码，也可以来自第三方库。解析器帮助 webpack 为每一个这样的 require/import 语句找到需要被打包进 bundle 的模块代码。
webpack 在打包模块时使用 enhanced-resolve 来解析文件路径。

webpack 中的解析规则

借助 enhanced-resolve，webpack 可以解析三种文件路径：

js 复制代码

import "/home/me/file";

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

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

js 复制代码

import "../src/file1";
import "./file2";

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

js 复制代码

import "my-module";
import "my-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 会根据你的构建目标为这些选项提供合理的默认值。

解析 Loaders 的规则与文件解析的规则相同。但是，可以使用 resolveLoader 配置选项为 loaders 设置独立的解析规则。

每次文件系统访问都会被缓存，这样对同一文件的多个并行或串行请求可以更快地完成。在监听模式下，只有被修改的文件会从缓存中驱逐。如果关闭监听模式，则每次编译前都会清空缓存。

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

发现翻译问题或内容错误？请告诉我们。