[译]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 --

 

相关推荐