webpack 如何解析代码模块路径的实现

2023-08-15 06:49:04 61

前言

webpack是如何解析代码模块路径

webpack中有一个很关键的模块enhanced-resolve就是处理依赖模块路径的解析的，这个模块可以说是Node.js那一套模块路径解析的增强版本，有很多可以自定义的解析配置。

模块解析规则

解析相对路径

解析模块名

查找当前文件目录下，父级目录及以上目录下的node_modules文件夹，看是否有对应名称的模块

解析绝对路径（不建议使用）

直接查找对应路径的文件

在webpack配置中，和模块路径解析相关的配置都在resolve字段下：

module.exports={
resolve:{
//...
}
}

resolve.alias

假设我们有个utils模块极其常用，经常编写相对路径很麻烦，希望可以直接import'utils'来引用，那么我们可以配置某个模块的别名，如：

alias:{
utils:path.resolve(__dirname,'src/utils')
//这里使用path.resolve和__dirname来获取绝对路径
}

上述的配置是模糊匹配，意味着只要模块路径中携带了utils就可以被替换掉，如：

import'utils/query.js'
//等同于import'[项目绝对路径]/src/utils/query.js'

如果需要进行精确匹配可以使用：

alias:{
utils$:path.resolve(__dirname,'src/utils')
//只会匹配import'utils'
}

更多匹配相关的写法可以参考官方文档ResolveAlias，这里不一一举例说明。

resolve.extensions

extensions:['.wasm','.mjs','.js','.json','.jsx'],
//这里的顺序代表匹配后缀的优先级，例如对于index.js和index.jsx，会优先选择index.js

看到数组中配置的字符串大概就可以猜到，这个配置的作用是和文件后缀名有关的。是的，这个配置可以定义在进行模块路径解析时，webpack会尝试帮你补全那些后缀名来进行查找，例如有了上述的配置，当你在src/utils/目录下有一个common.js文件时，就可以这样来引用.

import*ascommonfrom'./src/utils/common'

webpack会尝试给你依赖的路径添加上extensions字段所配置的后缀，然后进行依赖路径查找，所以可以命中src/utils/common.js文件。

resolve.modules

前面的内容有提到，对于直接声明依赖名的模块（如react），webpack会类似Node.js一样进行路径搜索，搜索node_modules目录，这个目录就是使用resolve.modules字段进行配置的，默认就是：

resolve:{
modules:['node_modules'],
},

如果可以确定项目内所有的第三方依赖模块都是在项目根目录下的node_modules中的话，那么可以在node_modules之前配置一个确定的绝对路径：

resolve:{
modules:[
path.resolve(__dirname,'node_modules'),//指定当前目录下的node_modules优先查找
'node_modules',//如果有一些类库是放在一些奇怪的地方的，你可以添加自定义的路径或者目录
],
}

这样配置在某种程度上可以简化模块的查找，提升构建速度。

后言

resolve还有一些其他的配置，还有其他的伙伴那就去官网看看，以上都是实际项目中使用到的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。