寫在前面
在這篇博客中,我將會你介紹圖片處理部分的相關配置
基礎配置
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
是壓縮後的雪碧圖