[webpack]--webpack 如何解析代码模块路径
前言
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 还有一些其他的配置,还有其他的伙伴那就去官网看看,以上都是实际项目中使用到的。
[webpack]--webpack 如何解析代码模块路径的更多相关文章
- webpack详细配置解析
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...
- webpack打包之无依赖模块
一.入口文件main.js // main.js console.log('webpack'); 二.出口文件bundle.js 1.浏览代码 2.本质 // 实际就是一个自执行函数 (functio ...
- Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件
Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...
- webpack CommonsChunkPlugin 提取公共代码
1.项目结构 2.部分代码 module.js console.log('module.js'); index文件夹下的index.js require('../module.js'); consol ...
- webpack提取公共js代码
webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...
- 记录一下webpack好用的node模块
postcss-loader autoprefixer: 自动添加css前缀 css-loader: 能在js文件中导入css(配合React比较好,我猜) style-loader: 将所有的计算后 ...
- python解析xml模块封装代码
在python中解析xml文件的模块用法,以及对模块封装的方法.原文转自:http://www.jbxue.com/article/16586.html 有如下的xml文件:<?xml vers ...
- Webpack之Code Splitting 代码分块
如何实现代码分块 默认情况webpack会将资源文件打包成一个js文件,比如app.bundle.js 实际情况我们需要按需加载 方法如下: require.ensure(dependencies, ...
- seajs模块路径解析 简单总结
最近在试着用 seajs + grunt 搭建项目雏形, 遇到的最大的问题就是 seajs 命名与调用, 简单总结一下. 模块调用 seajs中调用模块有两种方式,seajs.use(ID) . re ...
随机推荐
- Redis学习---Redis的免密操作
Redis的免密操作 问题解决[方式一]:当前这种linux配置redis密码的方法是一种临时的,如果redis重启之后密码就会失效 1.首先进入redis,如果没有开启redis则需要先开启: [r ...
- 《C++ Primer Plus》读书笔记之十—类和动态内存分配
第12章 类和动态内存分配 1.不能在类声明中初始化静态成员变量,这是因为声明描述了如何分配内存,但并不分配内存.可以在类声明之外使用单独的语句进行初始化,这是因为静态类成员是单独存储的,而不是对象的 ...
- python---九九乘法表代码
#_*_ coding:utf-8 _*_# author choco ''' #while循环num1=0while num1<9: num1+=1 num2=1 while num2< ...
- Cloudstack
1.cloudstack介绍 一个开源具有高可用性及扩展性的云计算平台,Cloudstack是一个开源的云操作系统: cloudstack支持管理大部分主流的hypervisors,如:VMware, ...
- [2018HN省队集训D6T2] girls
[2018HN省队集训D6T2] girls 题意 给定一张 \(n\) 个点 \(m\) 条边的无向图, 求选三个不同结点并使它们两两不邻接的所有方案的权值和 \(\bmod 2^{64}\) 的值 ...
- SDN 第一次上机作业
第一题 拓扑: 测试连通性: 第二题 拓扑: 测试连通性: 第三题 拓扑: 测试连通性:
- 【译文】Web Service 众所周知的问题
1. 什么是web service Web Service是一种网络程序间的通信方式,它允许开发者用API方式暴露自己的业务逻辑功能,这样,其他开发者可以使用它 2. Web Service的特性 互 ...
- css背景精华所在+前端页面开发流程
background属性 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- wk_06.md
IO与文件操作 文件内建函数open 内建函数open提供了初始化输入/输出(I/O)操作的通用接口.open()内建函数成功打开文件后会返回一个文件对象.open函数的语法如下: open(file ...
- 【[BJOI2017]魔法咒语】
矩阵乘法+\(AC\)自动机 是道很不错的题了 首先是前六十分,就是一个\(AC\)自动机上的套路\(dp\),设\(dp[i][j]\)表示匹配出的长度为\(i\)在自动机上位置为\(j\)的方案数 ...