webpack中的圖片打包之路

最近在Github上弄項目，需要搭建一個webpack開發環境。Emmm，是的，從0開始搭建一個項目確實不容易，光Webpack的坑就夠我踩一路的了。這不，剛搭建到“圖片打包”這裡，就遇到了麻煩。最後找到了問題的源頭，在mini-css-extract-plugin（抽離CSS代碼為一個CSC文件的插件）這個插件上。

錯誤操作就不示範了，下麵來探討一下webpack中的圖片打包方式。

1. 在JS中使用圖片

1 import logo from './images/logo.png'　　// 引入圖片資源並返回一個新的圖片地址
2 let img = new Image()
3 img.src = './images/logo.png'    // 錯誤！JS不會認為'./images/logo.png'一個資源，而是字元串
4 img.src = logo 

webpack中的相關配置

 1 {
 2   test: /\.(jpg|png|gif)$/,
 3   use: [{
 4     loader: 'url-loader',
 5     options: {
 6       outputPath: 'images/'
 7       limit: 100*1024
 8     }      
 9   }]                
10 }

上面使用的是url-loader，該loader比file-loader更好的地方就是能根據圖片的大小來決定是使用base64格式還是正常載入。

例如上面的配置，當圖片小於100KB時使用base64格式輸出，這樣就可以避免一個http請求。 

limit：屬性值有三種類型：Number（限定最大值），Boolean（是否啟用base64），String，預設為undefined

2. 在CSS中使用圖片，例如：背景圖片

這種方法的url-loader配置同上，但是有一個問題。如果你在配置CSS的過程中使用了mini-css-webpack-plugin這個插件來抽離CSS，那麼一定要註意路徑的問題，我就是在這上面踩了個大坑，費了不少時間。

CSS:  

 body {  
  background: url('../images/logo.png')  
}

 通過相對路徑引用了一張圖片（css文件夾和images文件夾處於同一級）

配置文件：

{
    test: /\.less$/,
    use: [{
           loader: MiniCssExtractPlugin.loader,
           options: {
                // 在這裡配置publicPath，不然CSS裡面的圖片路徑是以CSS目錄為根目錄的
                publicPath: '../'
           }},
　　　　　　'css-loader',
　　　　　　'postcss-loader',
　　　　　　'less-loader'
　　]
},

 註意這裡的 ‘publicPath’ ，當初我就是沒有設置該屬性，導致build後的CSS為

1 {background: url(images/logo.png)}　　// 明顯路徑錯了
2 {background: url(../image/logo.png)}　　// 設置publicPath值為 '../'

這樣，打包後的CSS中背景圖片的引用就正確了。

 3. 在HTML中引用圖片

我們經常使用html-webpack-plugin插件來給項目設置一個HTML模板，所以有時我們會在模板中插入圖片，但是webpack對HTML中的圖片是無能為力的，因為img標簽的src引入的圖片沒有被依賴，不會被打包，所以這時候我們需要使用 html-withimg-loader。

webpack配置：

1 {
2   test: /\.html$/,
3   use: 'html-withimg-loader'    
4 }

這樣，html中的圖片也能被正確的打包了！