Webpack 中 CSS 路径别名：理解 ~@ 和 @ 的差异
在使用 Webpack 构建项目时，特别是处理 CSS 中的背景图片路径，你可能会遇到 ~@ 和 @ 两种路径别名方式：
例如：
background-image: url(~@/assets/imgs/decorate.png);
Webpack 配置中通常会定义 @ 别名：
立即学习“前端免费学习笔记（深入）”；
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
alias: {
'@': path.resolve(__dirname, '../src'),
},
},
为什么会有两种写法？
这两种写法并非 CSS 标准，而是由 css-loader 造成的差异。css-loader 使用 ~ 符号作为路径别名的前缀，而 @ 符号则被视为路径的一部分。
路径别名的优势
使用路径别名可以显著提升 Webpack 的构建速度。它将冗长的文件路径映射为简短的别名，减少了构建过程中的字符串匹配次数。
css-loader 使用 ~ 的原因
css-loader 使用 ~ 符号是为了避免与实际文件路径冲突。如果直接使用 @，可能会与项目中已存在的目录名发生冲突，导致路径解析错误。
~ 符号的额外作用
css-loader 的 ~ 符号还允许从 node_modules 目录导入模块，这是 @ 符号无法实现的功能。 JavaScript 模块加载器通常不需要处理这种情况，因此可以使用 @ 而不会产生歧义。
总而言之，~@ 是 css-loader 特有的路径别名语法，用于区分项目内部路径和 node_modules 中的模块，而 @ 则是在 Webpack 配置中定义的更通用的路径别名。 理解这种差异有助于更好地编写和维护 Webpack 项目。
