前言

resolve用于设置模块是如何被解析的。
在开发中，我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库；resolve可以帮助webpack从每个require/import语句中，找到需要引入的合适的模块的代码。webpack使用enhanced-resolve 来解析文件路径。

webpack解析三种文件路径

1）绝对路径

由于已经获得文件的绝对路径，因此不需要再做进一步解析。

2）相对路径

  • 在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录；

  • 在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径；

    1.  相对路径 + 上下文路径 ==》 生成模块的绝对路径

3）模块路径

  • 在 resolve.modules 中指定的所有目录检索模块；默认值是 [‘node_modules’]，所以默认会从node_modules中查找文件；
  • 我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置。

文件还是文件夹

1）如果是一个文件

  • 如果文件具有扩展名，则直接打包文件；
  • 否则，将使用 resolve.extensions 选项作为文件扩展名解析。

2）如果是一个文件夹

会在文件夹中根据 resolve.mainFiles 配置选项中指定的文件顺序查找。

  • resolve.mainFiles 的默认值是：[‘index’]；
  • 再根据 resolve.extensions 来解析扩展名。

extensions配置

extensions是解析到文件时自动添加扩展名。这样的话，你就不用自己写扩展名了。
extensions的默认值是 [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]；所以，如果我们代码中想要添加加载.vue或jsx或ts等文件的话，我们必须自己写上扩展名。

alias配置 - 配置别名

使用场景：当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要../../../这种路径的片段的时候，我们可以给某些常见的路径起一个别名。

resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx', '.ts', '.vue'],
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "pages": path.resolve(__dirname, "./src/pages")
    }
}

       优化 **resolve** 配置：<br />           - 优化** resolve.modules** 配置，指明存放第三方模块的绝对路径，以减少寻找；<br />           - 优化** resolve.mainFields** 配置；<br />           - 优化** resolve.alias **配置；（给文件起别名）<br />           - 优化 **resolve.extensions** 配置（引入文件的时候就可以不用写后缀名了）<br />1-1-2）优化** resolve.modules **配置，指明**存放第三方模块的绝对路径**，以减少寻找<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/2367138/1647333331186-6f6b5129-7c66-4416-935e-0a17e79466eb.png#clientId=u3abdd85a-c43d-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ue8ddc266&margin=%5Bobject%20Object%5D&name=image.png&originHeight=315&originWidth=1148&originalType=url&ratio=1&rotation=0&showTitle=false&size=126005&status=done&style=none&taskId=u9cec33f6-9af4-402f-ae4e-a230228c5a2&title=)<br />告知webpack解析模块时应该搜索的目录，常见配置如下<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/2367138/1647337858826-0516308f-7f46-4694-93b9-fd4de49e7d19.png#clientId=uf7d62e5d-272d-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=342&id=u3f1e1f86&margin=%5Bobject%20Object%5D&name=image.png&originHeight=381&originWidth=550&originalType=binary&ratio=1&rotation=0&showTitle=false&size=16057&status=done&style=none&taskId=uef8e80c8-2a0e-4efd-b76b-e2f8948c088&title=&width=492.9971883437814)

告知 webpack 优先 src 目录下查找需要解析的文件，会大大节省查找时间


1-1-3）优化 resolve.mainFields 配置；
1-1-4）优化 resolve.alias 配置；（给文件起别名）
alias 用的创建 import 或 require 的别名，用来简化模块引用，项目中基本都需要进行配置。
image.png
配置完成后，我们在项目中就可以
image.png

1-1-5）优化 resolve.extensions 配置（引入文件的时候就可以不用写后缀名了）
webpack的默认配置

const config = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm'],
  },
};

如果用户引入模块时不带扩展名，例如

import file from '../path/to/file';

那么，webpack就会按照 extensions 配置的数组从左到右的顺序去尝试解析模块。

在配置 resolve.extensions 时你需要遵守以下几点，以做到尽可能的优化构建性能：

  • 后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。
  • 高频文件后缀名放前面，以做到尽快的退出寻找过程。

    手动配置后，默认配置会被覆盖

如果想保留默认配置，可以用 … 扩展运算符代表默认配置，例如

const config = {
  //...
  resolve: {
    extensions: ['.ts', '...'], 
  },
};
  • 在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。例如在你确定的情况下把 require(‘./data’) 写成 require(‘./data.json’)。

image.png