[译]webpack官网文档 :概念 -- 8.模块解析
原创翻译,转载请注明出处。
原文地址:https://webpack.js.org/concepts/module-resolution/
模块解析
解析器是一个库,它能依据模块的绝对路径来找到模块。使用下面的方法,一个模块就可以被另一个模块当作依赖来请求:
import foo from'path/to/module' // or require('path/to/module')
依赖模块可以是应用代码也可以是第三方的库。在每一个require/import声明的地方,解析器帮助webpack找到模块的代码把它们包含到包里。Webpack在打包模块的时候使用enhance-resolve库。
webpack里的解析规则
使用enhance-resolve库,webpack可以解析三种文件路径:
绝对路径
import"/home/me/file"; import"C:\\Users\\me\\file";
因为我们已经有了文件的绝对路径,不需要格外的解析
相对路径
import"../src/file1"; import"./file2";
在这个例子里,import或者require的资源文件的目录是一个上下文目录。Import/require里指定的相对目录被加到上下文路径里,就声称了模块的绝对路径。
模块路径
import"module"; import"module/lib/file";
在resolve.modules里指定的所有目录里寻找模块。你可以通过使用配置文件选项resolve.alias来创建别名,用一个替代路径代替源模块路径。
一旦路径通过上述规则被解析,解析器就会检查路径指向到文件还是目录。如果指向到文件:
- 如果文件有后缀名,文件直接被打包。
- 否则,使用resolve.extensions选项来解析文件的后缀,这个选项告诉解析器哪些后缀(例如:.js,.jsx)是可以接受解析的。
如果指向到文件夹,就会通过下面的步骤来找到正确的文件和正确的后缀:
- 如果文件夹里有package.json文件,那么在配置文件的resolve.mainFields选项里定义的字段就会被依次查看,第一个在package.json里存在的字段决定了文件路径。
- 如果没有package.json文件,或者主子段没有返回一个有效的路径,就会顺次查找在resolve.mainFiles这个配置选项里定义的文件名,看看在被引用或者请求的目录里有没有匹配的文件名。
- 文件后缀将会使用同样的方法,参照resolve.extensions选项解析。
Webpack给你所需要的这些选项提供了合理的默认配置。
解析加载器
遵从文件解析指定内容相同的规则。但是resolveLoader配置选项可以被用作拥有独立的解析加载器规则。
缓存
每一次文件系统的访问都被缓存,这样的话,对一个文件的多次并行或者顺次请求会提高速度。在观察模式下,只有被修改的文件会被从缓存中剔除。如果关闭观察模式,缓存就会在每次编译前被清空。
查阅ResolveAPI,对上面提到的配置选项了解更多。
-- End --