官网链接:https://webpack.js.org/concepts/module-resolution/

一、Resolver

resolver 是一个帮助寻找模块绝对路径的库。一个模块可以作为另一个模块的依赖被引入,就像下面这样

  1. import foo from 'path/to/module';
  2. // or
  3. require('path/to/module');

一个 dependency module 可以来自应用代码,也可以是一个第三方库。resolver 帮助 webpack 找到需要引入的代码。当绑定 module 时,Webpack 使用 enhanced-resolve 解析文件路径。

二、解析规则

使用 enhanced-resolve,webpack 可以解析三种文件路径

1. 绝对路径

  1. import '/home/me/file';
  2. import 'C:\\Users\\me\\file';

2. 相对路径

  1. import '../src/file1';
  2. import './file2';

3. 模块路径

  1. import 'module';
  2. import 'module/lib/file';

可以在 resolve.modules 中指定检索目录,我们同时可以使用 resolve.alias 创建路径别名

三、解析 Loaders

Loaders 的解析规则和文件一样。但是 resolveLoader 配置项可以为 loader 设置独立的解析规则

四、缓存

每次文件系统的访问都会被缓存以便更快触发并联、串联的请求相同的文件。在 watch 模式下,只有修改过的文件会被从缓存中移除。如果关闭 watch 模式。每次编译都会移除缓存。

「@浪里淘沙的小法师」