路径别名与 css 背景图设置
在 CSS 中，通常使用 @符号作为路径别名，而在 Webpack 构建工具中，却要求背景图片的资源路径采用 ~@。这是什么原因呢？
究其本质，这不是 CSS 要求的，而是 Webpack 中的 css-loader 所规定的。css-loader 负责处理 CSS 文件，当它遇到 ~ 符号时，会将其替换为真实的相对路径。
~ 符号的选择并没有特殊原因，它只是 css-loader 作者选定的特定字符。如果当初选择的是 ^，那么我们现在需要写的路径就是 ^@/assets/image.jpg。
为什么只有 css-loader 需要使用 ~ 符号，而 JS 中却没有此要求？这是因为 css-loader 采用了一种更合理的设计，以避免路径别名与实际文件目录的歧义。
立即学习“前端免费学习笔记（深入）”；
在 JS 中，路径别名可以随意定义，而 css-loader 则引入了一个特殊的字符 ~ 来指定别名，而其他字符则表示普通路径。这有效消除了歧义。
此外，css-loader 也允许导入位于 node_modules 下的模块文件。这在 JS 中是内置支持的，但 CSS 中原本没有这样的功能，css-loader 通过 ~ 符号来明确指示 Webpack 从 node_modules 中加载资源。
