webpack提取圖片文件打包壓縮

• 抽離圖片文件打包到指定路徑下
• 壓縮抽離的圖片資源
• 配置生成html中的圖片路徑

 一、准備測試環境

//工作區間
    src//文件夾
        index.js//入口文件
        index.css//樣式文件
        index.html//結構文件
    image//圖片文件夾
    package.json//配置打包的環境信息
    webpack.config.js//打包配置文件

首先需要准備打包插件（這里打包文件還不是用來處理圖片文件的）：

  "clean-webpack-plugin": "^3.0.0",//清除構建文件夾
  "css-loader": "^3.0.0",//用來加載css文件
  "html-webpack-plugin": "^3.2.0",//用來抽離html文件
  "style-loader": "^0.23.1",//用來將css樣式轉換成行間樣式
  "webpack": "^4.35.2",//打包工具
  "webpack-cli": "^3.3.5"//打包工具的指令集

通過上面的注釋，可以看到上面的打包配置還不能處理圖片資源，所以在測試上面的打包插件配置是否成功的情況下暫時不要在css中出現引用圖片路徑的樣式，在html引入的圖片路徑在抽取html文件的時候並不會對路徑進行處理，打包后（打包前后路徑不一致）可能會找不到圖片。

var path = require('path');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        index:'./src/index.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name][hash:5].bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {loader:'style-loader'},
                    {loader:'css-loader'}
                ]
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

測試上面的打包環境無誤的情況下正式進入webpack提取圖片文件操作。

 二、抽離圖片文件打包到指定路徑下

 在前面准備的打包配置基礎上再增加兩個加載器插件：

npm install url-loader --save-dev
npm install file-loader --save-dev

然后，這一步就可以給css代碼中添加圖片路徑了，config.js文件中添加下面這段配置：

module:{
    rules:[
        {
            test:/\.(png|jpg|jpeg|gif)$/,
            use:[
                {
                    loader:'url-loader',
                    options:{
                        name:'[name][hash:5].[ext]',//設置抽離打包圖片的名稱--[ext]用來獲取圖片的后綴
                        limit:100000,//限制圖片大小 <= 100kb 進行base64編碼（小於100kb打包進js文件）--測試時根據圖片的大小調整
                        outputPath:'image'//設置輸出文件夾名稱，這個文件夾會與主入口文件在同一路徑下
                    }
                }
            ]
        }
    ]
}

這段配置也還只能配置抽離css中的圖片文件，而且還只是抽離，並未對圖片進行壓縮處理，接下來看怎么配置壓縮圖片文件。

 三、壓縮抽離的圖片資源

繼續前面的步驟，下載安裝圖片壓縮需要的加載器：

npm install img-loader --save-dev
npm install imagemin-loader --save-dev
npm install imagemin-pngquant --save-dev

然后圖片資源（正則匹配圖片后綴）的加載器模塊下添加圖壓縮相關加載器和插件，為了更好的展示代碼結構這段代碼會與上一步的示例代碼部分重疊：

module:{
    rules:[
        {
            test:/\.css$/,
            use:[
                {loader:'style-loader'},
                {loader:'css-loader'}
            ]
        },
        {
            test:/\.(png|jpg|jpeg|gif)$/,
            use:[
                {
                    loader:'url-loader',//給圖片資源配置路徑加載器，用於文件抽離
                    options:{
                        name:'[name][hash:5].[ext]',//設置抽離打包圖片的名稱--[ext]用來獲取圖片的后綴
                        limit:100000,//限制圖片大小 <= 100kb 進行base64編碼（小於100kb打包進js文件）--測試時根據圖片的大小調整
                        outputPath:'image'//設置輸出文件夾名稱，這個文件夾會與主入口文件在同一路徑下
                    }
                },
                {
                    loader:'img-loader',//配置圖片資源加載器，用於圖片壓縮
                    options:{
                        plugins:[//給圖片資源加載配置插件
                            require('imagemin-pngquant')({//用於圖片壓縮的imagemin-pngquant，還有一個隱式調用的加載器imagemin-loader
                                quality:[0.3,0.5]//圖片壓縮30%~50%
                            })
                        ]
                    }
                }
            ]
        }
    ]
}

最后，就剩下html文件中的圖片引用沒有處理。

 四、配置生成html中的圖片路徑

通過配置html文件的加載器，然后再配置上應用圖片的標簽名和屬性名，html資源中的圖片應用就會被添加到加載器中進行處理（包括上面的圖片抽離和壓縮），先下載解析html文件的加載器：

npm install html-loader --save-dev

config配置（增加以下配置）：

module:{
    rules:[
        {
            test:/\.html$/,
            use:[
                {
                    loader:'html-loader',
                    options:{
                        attrs:['img:src']//配置html文件中img標簽的src屬性值
                    }
                }
            ]
            
        }
    ]
}

最后需要注意的是，針對每種圖片格式的壓縮配置都不是一樣的，也就是說有不同的壓縮插件，詳細參考npm插件手冊：https://www.npmjs.com/package/img-loader