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


Posted in Javascript onSeptember 04, 2019

前言

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

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

模块解析规则

解析相对路径

  1. 查找相对当前模块的路径下是否有对应文件或文件夹
  2. 是文件则直接加载
  3. 是文件夹则继续查找文件夹下的 package.json 文件
  4. 有 package.json 文件则按照文件中 main 字段的文件名来查找文件
  5. 无 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 还有一些其他的配置,还有其他的伙伴那就去官网看看,以上都是实际项目中使用到的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery选择器(常用选择器说明)
Sep 28 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
js数组操作学习总结
Nov 04 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 #Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 #Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 #Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 #Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 #Javascript
微信小程序按钮点击动画效果的实现
Sep 04 #Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 #Javascript
You might like
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
Javascript中的 “&” 和 “|” 详解
2017/02/02 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python微信库:itchat的用法详解
2017/08/14 Python
python操作excel的方法
2018/08/16 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
党委书记岗位职责
2013/11/24 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
Python Pandas 删除列操作
2022/03/16 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android