模块解析 | Module Resolution

resolver 是一个库(library)，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用，如下：

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

所依赖的模块可以是来自应用程序代码或第三方的库(library)。resolver 帮助 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 的资源文件(resource file)所在的目录被认为是上下文目录(context directory)。在 import/require 中给定的相对路径，会添加此上下文路径(context path)，以产生模块的绝对路径(absolute path)。

模块路径

import "module";
import "module/lib/file";

模块将在 resolve.modules 中指定的所有目录内搜索。 你可以替换初始模块路径，此替换路径通过使用 resolve.alias 配置选项来创建一个别名。

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

• 如果路径具有文件扩展名，则被直接将文件打包。

• 否则，使用该resolve.extensions选项解析文件扩展名，该选项告诉解析器哪些扩展名（例如 - .js，.jsx）可用于解析。

如果路径指向一个文件夹，则执行以下步骤以找到具有正确扩展名的正确文件：

• 如果文件夹中包含 package.json 文件，则按照顺序查找 resolve.mainFields 配置选项中指定的字段。并且 package.json 中的第一个这样的字段确定文件路径

• 如果 package.json 文件不存在或者 package.json 文件中的 main 字段没有返回一个有效路径，则按照顺序查找 resolve.mainFiles 配置选项中指定的文件名，看是否能在 import/require 目录下匹配到一个存在的文件名。

• 然后使用该resolve.extensions选项以类似的方式解析文件扩展名。

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

解析 Loaders

Loader 解析遵循与文件解析器指定的规则相同的规则。但是 resolveLoader 配置选项可以用来为 Loader 提供独立的解析规则。

高速缓存

每个文件系统访问都被缓存，以便更快触发对同一文件的多个并行或串行请求。在观察模式下，只有修改过的文件会从缓存中摘出。如果关闭观察模式，在每次编译前清理缓存。

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