Webpack Module Resolution学习

Module Resolution

文档地址
通过指定绝对路径来处理librariy以来。module可以作为以来从另外一个module引入。

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

依赖module可以来自业务代码或者第三方的library。
resolver帮助webpack查找每个通过require/import导入的代码块，并将这些依赖打包到bundle中。
webpack在构建modules时使用enhanced-resolve来解决文件路径的问题。

Resolving rules in webpoack

基于enhanced-resolve。webpack可以支持三种类型的文件路径

• Absolute path

import "/home/me/file";

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

使用绝对路径，则不需要再设置其他的规则

• Relative path

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

使用相对路径，使用import or require引入的依赖会基于运行环境的文件夹。
最终引入文件的路径，基于引入文件路径时的运行环境而定，将运行环境的路径同相对路径进行拼接，生成绝对路径。

• Module path

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

通过查找resolve.modules中配置的文件夹来查找依赖的module。
可以通过resolve.alias配置，使用alias替换原来module路径。
当基于上述规则解决了依赖，resolver会检测制定的路径是一个文件，还是一个文件夹。

如果是指向一个文件：

• 如果path有文件扩展名，则文件会被直接绑定使用。
• 如果path没有文件扩展名，则查找的文件后缀会通过resolve.extensions配置来决定。
  resolve.extensions会让resolver使用某个扩展名(eg: .js ,.jsx)来解决依赖。

如果指向的是文件夹:
resolver会通过如下的步骤找到正确的文件

• 如果文件夹中包含package.json。则会按照顺序从resolve.mainFields配置的文件中进行查找，
  package.json中第一个定义的文件路径会作为查找结果。
• 如果没有package.json或者resolve.mainFields返回的路径不可用，
  则会按照resolve.mainFields中定义的文件名在imported/required文件夹中按顺序进行查找。
• 文件后缀会通过使用resolve.extensions配置来进行查找。
  webpack会按照构建对象使用合理的配置来解决以来。
  默认配置

Resolving Loaders

loader以来的查找规则同文件查找规则一样，但是resolveLoader可以单独为loader进行配置。

Caching

文件系统都是又缓存的，所以五罗并发或连续请求相同文件速度都会很快。
在watch mode下，只有修改过的文件才会从缓存中被一处，如果未开启watch模式，则缓存只会在重新编译时被更新。
查看Resolve API来了解上述配置。