前言
webpack是如何解析代码模块路径
webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的,这个模块可以说是 Node.js 那一套模块路径解析的增强版本,有很多可以自定义的解析配置。
模块解析规则
解析相对路径
- 查找相对当前模块的路径下是否有对应文件或文件夹
- 是文件则直接加载
- 是文件夹则继续查找文件夹下的 package.json 文件
- 有 package.json 文件则按照文件中 main 字段的文件名来查找文件
- 无 package.json 或者无 main 字段则查找 index.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' }
更多匹配相关的写法可以参考官方文档 Resolve Alias,这里不一一举例说明。
resolve.extensions
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'], // 这里的顺序代表匹配后缀的优先级,例如对于 index.js 和 index.jsx,会优先选择 index.js
看到数组中配置的字符串大概就可以猜到,这个配置的作用是和文件后缀名有关的。是的,这个配置可以定义在进行模块路径解析时,webpack 会尝试帮你补全那些后缀名来进行查找,例如有了上述的配置,当你在 src/utils/ 目录下有一个 common.js 文件时,就可以这样来引用.
import * as common from './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 还有一些其他的配置,还有其他的伙伴那就去官网看看,以上都是实际项目中使用到的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 苏有朋.1994-珍惜的背包(第3张)【飞碟】【WAV+CUE】
- 《宝可梦:朱紫》“蓝之圆盘”IGN7分:性能优化仍旧灾难
- 《塞尔达传说:王国之泪》大获成功!多项年度数据表现优秀
- 应景!欧任用《塞尔达传说:王国之泪》堆雪人
- 杨采妮.1996-为所欲为(国专)【EMI百代】【WAV+CUE】
- 黎姿.1993-如果真的恋爱【华纳】【WAV+CUE】
- 朱婧汐.2024-VILLAIN反派角色【StreetVoic】【FLAC分轨】
- 《喷射战士3》最新祭典公布 1月13日举办
- NS日服年度下载榜公开:《王泪》不敌《西瓜游戏》
- 科乐美《心跳回忆GS》系列推出复刻版 2月14日登陆NS
- 林峰.2012-SELF-PORTRAIT【英皇娱乐】【WAV+CUE】
- TENSION.2004-Story新歌+精丫EMI百代】【FLAC分轨】
- 草蜢.2000-环球2000超巨星系列【环球】【WAV+CUE】
- 国行Switch开启元旦折扣!《马里奥奥德赛》7折促销
- 《塞尔达》官方账号感谢玩家支持 发布王泪最新壁纸