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

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方式打包：

使用url-loader方式打包：

若是不寫limit屬性，全部都不以url-loader方式打包

總結

1. 打包圖片須要用到url-loader或file-loader
2. css中使用圖片時，可以直接打包圖片路徑；js中使用圖片時，先用require加載圖片資源，而後再將路徑傳給對象
3. url-loader能夠將圖片格式轉成base64（圖片大小不大的時候推薦使用，如圖標等，可以減小http請求；可是圖片太大時不推薦使用，會致使數據太大，加載過慢）