• home > tools > Bundler > webpackTheory >

    关于前端的路径资源与webpack打包URL转换规则:webpack中@~符号

    Author:zhoulujun Date:

    在html里面,href、src、url的资源地址被浏览器解析时,如何进行资源定位?如:https: zhoulujun cn path1 path2 demo html,demo html

    在html里面,href、src、url的资源地址被浏览器解析时,如何进行资源定位?

    如:https://zhoulujun.cn/path1/path2/demo.html,demo.html 里面的/1.png  ./1.png ../1.png,请求的图片资源是?

     / 指向域名根目录 ./指向与html同级文件目录 ../指向html的上级目录,同理,../../指向上上级目录(有多少../,就有多少上)

    浏览器获取的是以网站 服务器指定的根目录文基准,客户终端是以服务器的根目录为基准。

    文件资源路径分析:

    • /指根路径 

    • ../回到上一级路径

    • ./当前路径

    推荐阅读《关于相对路径详解

    webpack资源路径规则

    官方解析:https://www.webpackjs.com/concepts/module-resolution/ 总结下:

    • 绝对路径:以/开头,保留路径不变。如:/static/imgs/xxx.png。已经取得文件的绝对路径,因此不需要进一步再做解析。

    • 相对路径:以.开头,基于所在文件进行上下文目录引用。如:./img/

      使用 import 或 require 的资源文件(resource file)所在的目录被认为是上下文目录(context directory)。在 import/require 中给定的相对路径,会添加此上下文路径(context path),以产生模块的绝对路径(absolute path)。

    • 模块路径:

      • 直接引入文件名:import('react')

      • 以~开头,其后的任何内容都会作为一个模块请求被解析。

    • 路径别名 一

    webpack模块路径

    模块将在 resolve.modules 中指定的所有目录内搜索。 你可以替换初始模块路径,此替换路径通过使用 resolve.alias 配置选项来创建一个别名。

    一旦根据上述规则解析路径后,解析器(resolver)将检查路径是否指向文件或目录。如果路径指向一个文件:

    • 如果路径具有文件扩展名,则被直接将文件打包。

    • 否则,将使用 [resolve.extensions] 选项作为文件扩展名来解析,此选项告诉解析器在解析中能够接受哪些扩展名(例如 .js, .jsx)。

    如果路径指向一个文件夹,则采取以下步骤找到具有正确扩展名的正确文件:

    • 如果文件夹中包含 package.json 文件,则按照顺序查找 resolve.mainFields 配置选项中指定的字段。并且 package.json 中的第一个这样的字段确定文件路径。

    • 如果 package.json 文件不存在或者 package.json 文件中的 main 字段没有返回一个有效路径,则按照顺序查找 resolve.mainFiles 配置选项中指定的文件名,看是否能在 import/require 目录下匹配到一个存在的文件名。

    • 文件扩展名通过 resolve.extensions 选项采用类似的方法进行解析。

    这里觉有必要回顾下:《再谈Node.js的模块加载方式+机制与运行原理



    转载本站文章《关于前端的路径资源与webpack打包URL转换规则:webpack中@~符号》,
    请注明出处:https://www.zhoulujun.cn/html/tools/Bundler/webpackTheory/8232.html

    延伸阅读: