前言
resolve用于设置模块是如何被解析的。
在开发中,我们会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库;resolve可以帮助webpack从每个require/import语句中,找到需要引入的合适的模块的代码。webpack使用enhanced-resolve 来解析文件路径。
webpack解析三种文件路径
1)绝对路径
由于已经获得文件的绝对路径,因此不需要再做进一步解析。
2)相对路径
- 在这种情况下,使用 import 或 require 的资源文件所处的目录,被认为是上下文目录;
在 import/require 中给定的相对路径,会拼接此上下文路径,来生成模块的绝对路径;
相对路径 + 上下文路径 ==》 生成模块的绝对路径
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 的别名,用来简化模块引用,项目中基本都需要进行配置。
配置完成后,我们在项目中就可以
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’)。