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

寫在前面

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

基礎配置

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是壓縮後的雪碧圖