解決 extract-text-webpack-plugin 分離 css 與 file-loader 處理圖片時，路徑不對的問題

在使用 extract-text-webpack-plugin 分離 css 時，指定一個輸出目錄：

當咱們在使用 file-loader 處理圖片時：

咱們在樣式中這樣引入背景圖片：

.hello {

  color: $primary-color;

  background: url('../img/1.jpg');

}
複製代碼

編譯以後的：

編譯以後咱們再去運行咱們的項目就會發現背景圖片找不到的問題：

出現這種問題是由於 webpack 編譯以後的路徑都是相對路徑，而咱們以前在分離 css 的時候又其放在了一個 css 文件夾下面，而圖片️放在了 img 文件夾下面。

---

解決方式一：

在 webpack.config.js 文件中加上：

這樣作有一個問題就是：

---

解決方式二：

咱們在須要的模塊中去處理：

這樣問題就解決了

---

【隨手筆記，感謝閱讀，不對之處請指教，謝謝】