css-loader中‘~’的做用

当咱们使用webpack打包应用程序的时候能够经过alias设置别名的方式避免相似于这种尴尬的局面require('../../path/to/foo')。 若是咱们设置了别名@指向src

alias: {
    @: path.resolve(__dirname, 'path/to/src')
}
复制代码

咱们就能够轻松引入src下的文件，假设咱们有以下目录src>img>foo.png

就能够这样引入 require('@/img/foo.png')，或者import '@/img/foo.png'

这种写法在js文件中是有效的，可是若是咱们的css中须要插入背景图片，这个时候如何写图片地址呢？

.foo{
    // 这种写法并不能成功解析，会构建出错
    background: url('@/assets/img/foo.png')
}
复制代码

一般咱们的css是须要css-loader进行处理的，天然咱们就会想到，若是想要在css中使用alias功能，那么一定是css-loader的支持。因此咱们打开css-loader的 官方文档。

发现有以下描述：

To import assets from a node_modules path (include resolve.modules) and for alias, prefix it with a ~:

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')
复制代码

也就是说须要在alias前面加上一个~号，让css-loader识别出这是一个alias。