webpack最終會將各個模塊打包成一個文件，因此我們樣式中的url路徑是相對入口html頁面的,

這個問題是用file-loader解決的，file-loader可以解析項目中的url引入（不僅限於css），根據我們的配置，將圖片拷貝到相應的路徑，再根據我們的配置，修改打包後文件引用路徑，使之指向正確的文件。

另外，如果圖片較多，會發很多http請求，會降低頁面性能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。相當於把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了。當然，如果圖片較大，編碼會消耗性能。因此url-loader提供了一個limit參數，小於limit字節的文件會被轉為DataURl，大於limit的還會使用file-loader進行copy。

url-loader工作分兩種情況：1.文件大小小於limit參數，url-loader將會把文件轉為DataURL；2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。

            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                // loader: ‘url-loader?name=images/[name].[ext]‘,
                loader: ‘url-loader‘,
                options: {
                  limit: 10,
                  name:‘imgs/[name].[ext]‘
                }
            },
            {
                test: /\.(mp3)(\?.*)?$/,
                loader: ‘url-loader‘,
                options: {
                  name:‘audios/[name].[ext]‘,
                  limit:10
                }
            }        

webpack處理媒體文件(圖片/視頻和音頻)