WebPack 模块解析
WebPack 模块解析
resolver 是库(library),用于帮助找到模块的。模块可以作为另模块的依赖模块,然后被后者引用,如下:
import foo from 'path/to/module' // 或者 require('path/to/module')
所依赖的模块可以是来自应用程序或第三方的库(library)。resolver 帮助 webpack 找到 bundle 中需要引入的模块,这些在包含在每个 require/import 语句中。 当打包模块时,webpack 使用 来解析路径
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 配置选项来创建别名。
一旦根据上述规则解析路径后,解析器(resolver)将检查路径是否指向或目录。如果路径指向:
如果路径具有扩展名,则被直接将打包。
否则,将使用 [resolve.extensions] 选项作为扩展名来解析,此选项告诉解析器在解析中能够接受哪些扩展名(例如 .js, .jsx)。
如果路径指向夹,则采取以下步骤找到具有正确扩展名的正确:
如果夹中包含 package.json ,则按照顺序查找 resolve.mainFields 配置选项中指定的字段。并且 package.json 中的第这样的字段确定路径。
如果 package.json 不存在或者 package.json 中的 main 字段没有返回有效路径,则按照顺序查找 resolve.mainFiles 配置选项中指定的名,看是否能在 import/require 目录下匹配到存在的名。
扩展名通过 resolve.extensions 选项采用类似的进行解析。
webpack 根据构建目标(build target)为这些选项提供了合理的认配置。
解析 Loader(Resolving Loaders)
Loader 解析遵循与解析器指定的规则相同的规则。但是 resolveLoader 配置选项可以用来为 Loader 提供独立的解析规则。
缓存
每个系统访问都被缓存,以便更快触发对同一的多个并行或串行请求。在观察模式下,只有过的会从缓存中摘出。如果观察模式,在每次编译前清理缓存。
有关上述配置的更多信息,请查看解析API学习。