解析器是一个通过绝对路径来帮助定位模块的库(library)。 一个模块可以作为另一个模块的依赖模块,然后被后者引用,如下:
import foo from 'path/to/module'
// or
require('path/to/module')
依赖模块可以来自应用程序代码或第三方库。解析器帮助 webpack
找到 bundle 中需要引入的模块代码,这些代码在包含在每个 require
/import
这样的语句中。
当打包模块时,webpack
使用增强解析来解析文件路径
使用 enhanced-resolve
,webpack 能够解析三种文件路径:
import "/home/me/file";
import "C:\\Users\\me\\file";
由于我们已经有了文件的绝对路径,因此不需要进一步解析。
import "../src/file1";
import "./file2";
在这种情况下,出现 import
或 require
的资源文件的目录被认为是上下文目录(context directory)(当前处理文件的目录)。在 import/require
中给定的相对路径被追加到此上下文路径(context path),以生成模块的绝对路径(absolute path)。
import "module";
import "module/lib/file";
模块将在 resolve.modules
中指定的所有目录内搜索。
你可以替换初始模块路径,此替换路径通过使用 resolve.alias
配置选项来创建一个别名。
一旦根据上述规则解析路径后,解析器(resolver)将检查路径是否指向文件或目录。如果路径指向一个文件:
resolve.extensions
] 选项作为文件扩展名来解析,此选项告诉解析器在解析中能够接受哪些扩展名(例如 .js
, .jsx
)。
如果路径指向一个文件夹,则采取以下步骤找到具有正确扩展名的正确文件。
package.json
文件,则按照顺序查找 resolve.mainFields
配置选项中指定的字段。并且 package.json
中的第一个这样的字段确定文件路径。
webpack 根据构建目标(build target)为这些选项提供了合理的默认配置。
Loader 解析遵循与文件解析器指定的规则相同的规则。但是 resolveLoader
配置选项可以用来为 Loader 提供独立的解析规则。
每个文件系统访问都被缓存,以便更快触发对同一文件的多个并行或穿行请求。在观察模式下,只有修改过的文件会从缓存中摘出。如果关闭观察模式,在每次编译前清理缓存。
有关上述配置的更多信息,请查看解析 API。