ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

webpack--resolve

2021-09-18 21:04:30  阅读:121  来源: 互联网

标签:文件 resolve 扩展名 -- js webpack 模块 解析


resolve模块解析

resolve用于设置模块如何被解析:

  • 在开发中我们会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库;

  • resolve可以帮助webpack从每个 require/import 语句中,找到需要引入到合适的模块代码

  • webpack 使用 enhanced-resolve 来解析文件路径;

webpack能解析三种文件路径:

绝对路径
  • 由于已经获得文件的绝对路径,因此不需要再做进一步解析。
相对路径
  • 在这种情况下,使用 import 或 require 的资源文件所处的目录,被认为是上下文目录;

  • 在 import/require 中给定的相对路径,会拼接此上下文路径,来生成模块的绝对路径;

模块路径
  • 在 resolve.modules中指定的所有目录检索模块;

  • 默认值是 ['node_modules'],所以默认会从node_modules中查找文件;

  • 我们可以通过设置别名的方式来替换初识模块路径,具体后面讲解alias的配置;

确实文件还是文件夹

如果是一个文件:

  • 如果文件具有扩展名,则直接打包文件;

  • 否则,将使用 resolve.extensions选项作为文件扩展名解析;

如果是一个文件夹:

会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找;
  • resolve.mainFiles的默认值是 ['index'];

  • 再根据 resolve.extensions来解析扩展名;

什么是 确定是文件夹 还是 文件 ?

文件夹?

如果文件夹里默认是 index.js -----> 则可以省略index.js

image

文件?

如果是.js文件,可以直接省略扩展名;
为什么可以省略.js?
因为 默认值是 ['.wasm', '.mjs', '.js', '.json'];

如果省略 .vue .tx .jsx 是会报错的, 因为需要通过 extensions 来手动添加

image

extensions和alias配置

extensions是解析到文件时自动添加扩展名:

  • 默认值是 ['.wasm', '.mjs', '.js', '.json'];

  • 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时,我们必须自己写上扩展名

image

image

另一个非常好用的功能是配置别名alias:

  • 特别是当我们项目的目录结构比较深的时候,或者一个文件的路径可能需要 ../../../这种路径片段;

  • 我们可以给某些常见的路径起一个别名;

  • 这种就是 我们经常在vue项目里 引入 组件一样

  • import Loading from "@/components"

  • 为什么 @ 可以直接找到 components文件?

  • 因为给 @ 指定到根目录了 也就是 src --> src/components

image

image

标签:文件,resolve,扩展名,--,js,webpack,模块,解析
来源: https://www.cnblogs.com/cl1998/p/15310139.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有