Webpack4系列教程(五) 圖片相關配置

帕尼尼0_0發表於2018-12-24

寫在前面

在這篇部落格中,我將會你介紹圖片處理部分的相關配置

基礎配置

CSS中引入圖片需要使用file-loader

首先我們把一些圖片放在src/assets/imgs目錄下,並且引入這些圖片
在這裡插入圖片描述
然後我們配置一條rule:圖片檔案交給file-loader處理

{ 
    loader: 'file-loader',
    options: {
        outputPath: 'assets/imgs',
        useRelativePath: true
    } 
}

執行打包後dist目錄結構如下
在這裡插入圖片描述

Base64 編碼

當圖片很小的時候我們可以將圖片轉換為base64嵌入到css檔案中,以減少http請求次數
在處理圖片和進行base64編碼的時候,需要使用url-loader
我們配置一條rule:圖片檔案交給url-loader處理

{ 
    loader: 'file-loader',
    options: {
        outputPath: 'assets/imgs',
        useRelativePath: true
    } 
}

執行打包後dist目錄結構如下
在這裡插入圖片描述
圖片檔案全部被打包到了css檔案中
在這裡插入圖片描述
css檔案達到了142kb,這顯然不是我們想要的,我們希望體積小的圖片轉換為base64,體積更大的還是以圖片格式儲存
我們修改下rule

{ 
    loader: 'url-loader',
    options: {
        outputPath: 'assets/imgs',
        useRelativePath: true,
        limit: 20000 //當圖片小於20kb時會轉換成base64
    } 
}

執行打包後dist目錄結構如下,一張圖片被轉換成base64,三張以圖片格式輸出
在這裡插入圖片描述

壓縮圖片

使用image-webpack-loader進行圖片的壓縮
配置如下

{
    test: /\.jpg$/,
    use: [
        { 
            loader: 'url-loader',
            options: {
                name: '[name].min.[ext]'
                outputPath: 'assets/imgs',
                useRelativePath: true,
                limit: 5000 //當壓縮後的圖片小於5kb時會轉換成base64
            } 
        },
        {
            loader: 'image-webpack-loader',
            options: {
                optimizationLevel: 7,
                interlaced: false
              }
        } 
    ]
}

執行打包後dist目錄結構如下,兩張圖片被轉換成base64,兩張以圖片格式輸出
在這裡插入圖片描述

雪碧圖

使用postcss-sprites進行圖片的壓縮
將專案中需要用到的icon合併到一張圖以減少圖片資源的請求次數
修改postcss.config.js檔案,配置如下

module.exports = {
    plugins: [
        require('postcss-sprites')({
            spritePath: 'dist/assets/imgs/sprites'
        }),
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
};

在這裡插入圖片描述
其中sprite.min.png是壓縮後的雪碧圖

相關文章