webpack4怎么使用loader對圖片資源打包

 

　　首先讓我用一句話來概括webpack和loader到底是什么？

　　　　webpack：一個模塊打包工具，不僅可打包js文件，還可以打包css文件，圖片等資源

　　　　loader：專門用來打包那些webpack無法識別的非js后綴的模塊，比如css，圖片等模塊

 

 

　　下面讓我們通過2個實際需求來看看怎么使用loader對圖片資源進行打包

　　需求一：打包圖片后生成的圖片名字和打包前名字一樣

　　　　　　打包前圖片名：

　　　　　　打包后圖片名：

　　使用loader提供的file-loader，在webpack.config.js配置文件中對options選項添加name參數即可

module: {
    rules: [{
        test: /\.(png|jpg|gif)$/,
        use: {
            loader: 'file-loader', 
            options: {
                name: '[name].[ext]',
            }
        }
    }]
}

 

 

　　需求二：可自定義設置打包后圖片存放文件路徑，比如把圖片存放在dist文件夾下新建的images文件夾中

　　　　　　一般打包后生成的圖片會默認存放在dist文件夾中，不會自動生成其它文件夾存放

　　使用loader提供的file-loader，在webpack.config.js配置文件中對options選項添加outputPath參數即可

module: {
    rules: [{
        test: /\.(png|jpg|gif)$/,
        use: {
            loader: 'file-loader', 
            options: {
                name: '[name].[ext]',
                outputPath: 'images/'
            }
        }
    }]
}

　　 file-loader各參數配置詳見：https://www.webpackjs.com/loaders/file-loader/

　　

 

　　另外，loader中的url-loader和file-loader類似，file-loader能實現的，它都能實現，但在下面場景下使用url-loader更合適

　　需求一：當圖片大小>限定圖片大小時，圖片不打包進js文件中；當圖片大小<限定圖片大小時，圖片打包到js文件中

　　　　　　如果把圖片打包進js文件中，可以減少HTTP請求，但當圖片很大時，會增加打包后js文件的大小，從而影響頁面加載，甚至造成白屏，

　　　　　　而url-loader不管圖片大小，默認會把圖片打包進js文件中，圖片格式為base64，如下圖

 　　　　　　　

　　　　　　　有沒有什么兩全其美的方法呢？答案是有的。只需要在webpack.config.js配置文件中對options選項添加limit參數即可

module: {
    rules: [{
        test: /\.(png|jpg|gif)$/,
        use: {
            loader: 'url-loader', 
            options: {
                name: '[name].[ext]',
                outputPath: 'images/',
                limit: 20480
            }
        }
    }]
}

　　　　　　注：這里limit設置的數值單位為字節，不是KB，數值20480換算后為20KB，

　　　　　　  當圖片大小>20KB，則打包到dist文件夾中；當圖片<20KB，則直接打包到js文件中