webpack css 圖檔路徑設定

透過require 載入css file
css內若包含了圖檔連結或是連結字型檔案
webpack在做bundle時,通常會把連結的圖檔抽離出來放到
設定的bundle目錄下
而css內的圖檔路徑連結基本上預設是與css同一目錄

但使用style-loader 會將css 內容塞到index.html內
而造成index網頁內的css會在同一層級找圖檔
找不到的問題

需要讓webpack bundle時可以將css內圖檔路徑指到
我們指定的路徑下
即可解決這個問題

webpack config loader設定

{
    test: /\.css$/,
    loader:"style-loader!css-loader" #針對css檔案載入並插入網頁內
},
{ 
    test: /\.(png)$/, #對於圖檔,使用file載入並指定圖檔讀取的目錄
    loader: 'file-loader?publicPath=bundle/' 
}