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。