你需要提前知道的

在用 webpack 處理打包時，可以將某一個目錄配置一個別名，程式碼中可以使用與別名的相對路徑引用資源。

alias 通道： https://doc.webpack-china.org/configuration/resolve/#resolve-alias

具體使用

在 webpack 中配置：

...,
resolve: {
  ...,
  alias: {
    'Src': resolve('src')
  }
}

你可以這樣使用：

import xxx from "Src/...";

來代替：

import xxx from "路徑/src/..."
 
;

這樣做的好處是：當你改變目錄的位置的時候，不需要在每個引入它的地方進行更改，只需要更改 webpack 中的配置就可以了。

引用非 js 檔案的靜態資源

各類非 js 直接引用（import require）靜態資源，會出現問題。

例如：

在 webpack 中配置：

resolve: {
  ...,
  alias: {
    'Css': resolve('css')
  }
}

錯誤使用：

@import "Css/...";

報錯：”找不到 ‘Css’ 目錄”。 說明 webpack 沒有正確識別資源相對路徑。

原因：css 檔案會被 css-loader 處理，這裡的”Css/…”會被 css-loader 當做絕對路徑處理。因為我們並沒有新增 css-loader 的 alias，所以報錯啦。

解決：

在 webpack 中 css import 使用 alias 相對路徑的解決辦法有兩種：

1. 直接為 css-loader 新增 alias 的路徑。

2. 在引用路徑的字串前面加上 ~ 的符號，如：@import “~Css/…”。webpack 會以~符號作為字首的路徑視為依賴模組去解析。

正確使用：

@import "~Css/...";

總結

~ 視為模組解析是 webpack 做的事，不是 css-loader 的事。

各類非 js 直接引用（import require）靜態資源，依賴相對路徑載入的問題都可以使用~語法完美解決。

例如：

• css module 中： @import “~Css/…”;
• css 屬性中： backaground:url(‘~Image/…’)
• html 標籤中：<img src="~Image/..."/>