模块解析 | Module Resolution

模块解析

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

解决webpack中的规则

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

绝对路径

import "/home/me/file";

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

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

相对路径

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

模块路径

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

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

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

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

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

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

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

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

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

解析 Loaders

高速缓存

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