关于前端的路径资源与webpack打包URL转换规则：webpack中@~符号
Author：zhoulujun Date：
在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的模块加载方式+机制与运行原理 》
resolve.alias
在webpack打包时，会把路径引用中的@符号，转换为相对应的路径。比如：
module.exports = {
// ...
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
};就可以设置 @ 指向 src 目录，这样，在开中就可以使用 @ 符号来引用 App.js 文件，如下所示：
import App from '@/components/App';// 实际目录为project/src/Page/App.js
在Webpack中，波浪符 ~ 通常用于引用node_modules文件夹中的模块。当你在CSS或Sass文件中使用~符号时，Webpack会解析它并将其视为node_modules文件夹的路径别名。这允许你直接引用已安装的第三方库中的样式文件，而无需使用相对路径。
在你的CSS或Sass文件中，你可以使用~符号来引用Bootstrap的CSS文件，如下所示：
@import '~bootstrap/dist/css/bootstrap.min.css';
这告诉Webpack从node_modules文件夹中查找bootstrap库，并从中导入bootstrap.min.css文件。
转载本站文章《关于前端的路径资源与webpack打包URL转换规则：webpack中@~符号》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpackTheory/8232.html