webpack_07 (resolve)
webpack能解析三种文件路径:
绝对路径
由于已经获得文件的绝对路径,因此不需要再做进一步解析。
相对路径
在这种情况下,使用 import 或 require 的资源文件所处的目录,被认为是上下文目录;
在 import/require 中给定的相对路径,会拼接此上下文路径,来生成模块的绝对路径;
模块路径
在 resolve.modules中指定的所有目录检索模块;
默认值是 ['node_modules'],所以默认会从node_modules中查找文件;
我们可以通过设置别名的方式来替换初识模块路径,具体后面讲解alias的配置;
1 2 3 4 5 6 7 8 9 10 | #webpack.config.js module.exports = { resolve: { extensions: [ '.js' , '.json' , '.mjs' , '.vue' , '.ts' , '.jsx' , '.tsx' ], alias: { '@' : path.resolve(__dirname, './src' ), 'js' : path.resolve(__dirname, './src/js' ) } } } |
如果是一个文件:
如果文件具有扩展名,则直接打包文件;
使用 resolve.extensions选项作为文件扩展名解析
如果是一个文件夹:
会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找;
resolve.mainFiles的默认值是 ['index'];
再根据 resolve.extensions来解析扩展名;
extensions是解析到文件时自动添加扩展名:
默认值是 ['.wasm', '.mjs', '.js', '.json'];
所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时,我们必须自己写上扩展名;
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!