【填坑指南】webpack圖片路徑與打包問題

我你日哥發表於2019-02-14
Web
Webpack是一個模組打包工具。平時我們開發中為了提高開發效率會使用一些開發框架React、Vue等、擴充性語言Typescript、Flow等、CSS前處理器Scss/Sass/Less/Stylus等以及一些新語法特性ES6等，但是這些都是瀏覽器無法直接識別的。如果人工進行編譯打包，那麼是非常繁瑣、費事的，而Webpack則可以將這些複雜的、大量的依賴包自動解析、編譯並打包成細小的瀏覽器可識別的檔案。

為什麼在JavaScript中載入圖片不能直接識別圖片路徑

因為在webpack中，除了js型別的檔案是能夠直接被識別並打包，其他型別檔案（css、圖片等）則需要通過特定的loader來進行載入打包，而圖片則需要用到file-loader或url-loader。

在JavaScript中引入圖片路徑時，webpack並不知道它是一張圖片，所以需要先用require將圖片資源載入進來，然後再作為圖片路徑新增到物件上。

url-loader和file-loader功能基本一致，只不過url-loader能將小於某個大小（可以自定義配置）的圖片進行base64格式的轉化處理。

圖片使用的場景

安裝file-loader

npm i file-loader

yarn add file-loader

// webpack.conf.js

module.exports={
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: ['file-loader']             
            }
        ]
    }
}
複製程式碼

  • 在CSS中使用，file-loader能自動識別CSS程式碼中的圖片路徑並打包到指定路徑

// html
<img src="./images/bg_img.png">

// css
{ background: url("./images/bg_img.png"); }複製程式碼

  • 在JavaScript中使用

// js
let uri = require('./images/bg_img.png');

let img = document.querySelector('img');
img.src = uri;

// vue
<img :src="require('./images/bg_img.png')">
<div :style="{backgroundImage: 'url(' + require('./images/bg_img.png') + ')'}"> // 這裡動態載入圖片的時候，使用background時不要新增其他屬性，如：no-repeat、center等，如需要單獨設定複製程式碼

url-loader

url-loader功能基本和file-loader一致，所以也可用url-loader替代。

url-loader還可對小於某個大小尺寸的圖片進行base64格式的轉化處理。

npm i url-loader

yarn add url-loader

// webpack.conf.js

module.exports={
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: ['url-loader'],
                options: {
                    name: './images/[name].[ext]',
                    limit: 1024
                }        
            }
        ]
    }
}複製程式碼

limit屬性的作用就是，將檔案小於1024B大小的圖片轉成base64格式，而大於的則以file-loader方式打包處理。

使用file-loader方式打包：

【填坑指南】webpack圖片路徑與打包問題

使用url-loader方式打包：

【填坑指南】webpack圖片路徑與打包問題

如果不寫limit屬性，所有都不以url-loader方式打包

總結

  1. 打包圖片需要用到url-loader或file-loader
  2. css中使用圖片時，能夠直接打包圖片路徑；js中使用圖片時，先用require載入圖片資源，然後再將路徑傳給物件
  3. url-loader可以將圖片格式轉成base64（圖片大小不大的時候推薦使用，如圖示等，能夠減少http請求；但是圖片太大時不推薦使用，會導致資料太大，載入過慢）


相關文章