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 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
vue之将echart封装为组件
Jun 02 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 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为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
php支付宝APP支付功能
2020/07/29 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
js实现星星打分效果
2020/07/05 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python设计模式之观察者模式实例
2014/04/26 Python
Python中apply函数的用法实例教程
2014/07/31 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
项目专员岗位职责
2013/12/04 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书