webpack中的圖片打包之路

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

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

1. 在JS中使用圖片

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

webpack中的相關配置

{
  test: /\.(jpg|png|gif)$/,
  use: [{
    loader: 'url-loader',
    options: {
      outputPath: 'images/'
      limit: 100*1024
    }      
  }]                
}

上面使用的是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為

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

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

 

 3. 在HTML中引用圖片

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

webpack配置：

{
  test: /\.html$/,
  use: 'html-withimg-loader'    
}

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