Webpack雜症區｜Stylus background-image url 路徑轉換問題

剛開始在使用Webpack 轉換 Stylus時，碰到了background-image: url()路徑解析錯誤的問題，我的網站規劃是這樣的

./dist
--|images
---|demo.jpg
--|css
---|style.css
--|js
---|action.js
--index.html

碰上這個問題時，我在stackoverflow、Github上搜尋過許多相關文獻，有許多工程師們分享了他們的解決方式，例如針對url-loader新增optings修改publicPath的設定或是直接對.styl$新增optings的修改，但問題是，方法一如果不是在css中的檔案也會碰到頁面路徑修改的問題，而方法二會對images資料夾再多包一層資料夾，等於我為了取得image還要多一層資料夾才能抓到正確的路徑，這樣的解決方式對我來說並不完美

stackoverflow上分享的方式：
方法一：
...
{
   test: /\.(png|svg|jpg|jpge|gif)$/,
   exclude: /node_modules/,
   use: {
     ...
     loader: 'url-loader',
     publicPath: '../',
     outputPath: 'images'
     ...
   }
}
...
方法二：
...
{
   test: /\.styl$/,
   exclude: /node_modules/,
   use: {
     ...
     {
         loader: MiniCssExtractPlugin.loader,
         options: {
            publicPath: '../'
         }
     }
     ...
   }
}
...

在用了方法二的一段時間後，一直很不高興為什麼要多一個無用的資料夾的情況下，決定繼續挑戰維修路徑的問題！！

我的解決方法是這樣的，在Webpack的官方文獻上，針對publicPath有一個公用路徑的設定，其實在官網做的設定介紹也是拿來用在output上，但經歷過太多次的失敗，抱著嘗試的心情，我試著將官方文獻的方式搬到設定檔看看，沒想到，登愣~一個完美的解決方法就這麼誕生了♥

首先，設定publicPath的參數，為了不改變所有會取用到image的路徑的檔案，我們只針對.styl$來做options的設定，那麼解決的code如下~

webpack.config.js
-------------------------------------
const ASSET_PATH = process.env.ASSET_PATH || '../';
...
{
   test: /\.styl$/,
   exclude: /node_modules/,
   use: {
     ...
     {
         loader: MiniCssExtractPlugin.loader,
         options: {
            publicPath: ASSET_PATH,
         }
     }
     ...
   },{
   test: /\.(png|svg|jpg|jpge|gif)$/,
   exclude: /node_modules/,
   use: {
     ...
     loader: 'url-loader',
     outputPath: 'images'
     ...
     }
   }
}
...
style.styl
-------------------------------------
.image
   ...
   background-image:  url('../images/demo1.jpg');
   ...

那麼希望這篇文章能夠為同樣碰到css路徑問題的人們解決問題~如果你有更好的解決方法也歡迎隨時跟我們分享歐~