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功能，那么