本節(jié)知識點

• 處理 CSS中引入圖片的問題

(一) 把圖片寫入CSS文件

• (1) 在src文件夾下面創(chuàng)建一個images文件夾然后把圖片拷過去
  然后在 CSS文件里面寫入代碼

#picture{
    background:url(../images/b.jpg) no-repeat left center;
    width: 343px;
    height:147px;
}

(二) 安裝file-loader 和url-loader這兩個loader

• 安裝file-loader和url-loader

npm install file-loader url-loader --save-dev

說明 file-loader :解決引用路徑的問題，拿background樣式引用URL的背景圖來說明。我們都知道webpack最后會將各個模塊打包成一個文件。因此我們的URL路徑是相對入門HTML頁面的，而不是原始的css文件所在的路徑。所以圖片加載必然會導致失敗。這個問題用的就是file-loader來解決。

說明url-loader : 如果圖片太多。會發(fā)出很多HTTP請求，會降低頁面性能，這個問題通過url-loader來解決。URL-loader會將引入的圖片編碼，解析成dataurl相當于把圖片數據翻譯成一串字符。再把這個字符打包到文件中。最終只要引入這個文件就能訪問圖片了。如果圖片太大了，會消耗性能。因此url-loader提供了一個limit參數 小于這個參數則會打包成dataurl大于limit則還會用file-loader進行copy

• 安裝完成后 配置webpack.json這個文件

 module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.(jpg|png|gif)/,
                use:[
                    {
                        loader:"url-loader",
                        options:{
                            limit:1048576
                        }
                    }
                ]
            }
        ]
    }

• test:/.(jpg|png|gif)/, 是匹配文件的后綴名
• use: 使用什么模塊
• options里面的limit : 是把小于1048576b(相當于1M)變成base64的格式，寫入js

為什么只用了url-loader

• 我們需要了解url-loader和file-loader使用關系
• 簡單來說url-loader封裝了file-loader，url-loader不依賴于file-loader.
• 文件小于limit參數url-loader會把文件轉換成base64
• 文件大于limit參數url-loader會調用file-loader參數進行處理。參數也會直接傳遞給file-loader