打包圖片資源說明
- 需要使用到
url-loader處理圖片 - 注意
url-loader依賴于file-loader,因此安裝時注意.兩個都要安裝
1. 處理在樣式文件中引入的圖片
說明:
- 樣式中引入圖片就是通過
background-image屬性來引入背景圖片 - 接來下我們以在
.less文件中為例了解webpack如何打包圖片資源
1.1 在less中引入圖片
創(chuàng)建less文件,開發(fā)樣式并使用背景圖片
代碼如下:
#box1{
width: 100px;
height: 100px;
background-image:url("../img/vue.jpg");
background-repeat: no-repeat;
background-size: 100% ,100%;
}
#box2{
width: 200px;
height: 200px;
background-image:url("../img/react.jpg");
background-repeat: no-repeat;
background-size: 100% ,100%;
}
#box3{
width: 300px;
height: 400px;
background-image:url("../img/angular.png");
background-repeat: no-repeat;
background-size: 100% ,100%;
}
1.2 配置webpack
在webpack配置文件webpack.config.js中配置打包圖片的loader
配置代碼如下:
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")
module.exports = {
entry: "./src/main.js",
output: {
filename : "bundle.js",
path: resolve(__dirname, 'dist')
},
module: {
rules:[
{
test: /\.less$/,
// 多個loader, 使用use配置
use:["style-loader","css-loader","less-loader"]
},
{
test: /\.(jpg|png|gif)$/,
// 使用一個loader處理, 用loader配置
// 注意url-loader依賴file-loader
// 因此兩個loader都需要安裝
loader: "url-loader",
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode:"development"
}
示例說明:
- 在需要使用多個loader處理文件時,需要使用use配置項
- 如果只需要一個loader處理文件,則可以使用loader配置項配置
注意事項:
- 如果控制臺提示不能識別
id選擇器的#號,或者class選擇器的.時 - 我們就需要在導入
less或css文件是,將loader配置進去 - 例如
import "style-loader!css-loader!./index.less"
2. 圖片打包配置
2.1 上節(jié)示例結(jié)果分析
- 打包后,發(fā)現(xiàn)所有的圖片都會打包成為
base64圖片 -
base64圖片的優(yōu)點: 減少服務請求次數(shù),減輕服務器壓力 -
base64圖片的缺點: 圖片的體積會變大, 文件的加載速度會變慢 - 因此我們要綜合考慮, 體積比較小的圖片打包為
base64,圖片太大的圖片,就不打包為base64
因此我們并不需要所有的圖片都打包為base64圖片,
我們要對url-loader進行配置.
低于設置大小的圖片打包為base64圖片, 大小超過的不打包為base64圖片
2.2 配置url-loader
通過options來配置圖片打包的loader
示例:
{
test: /\.(jpg|png|gif)$/,
// 使用一個loader處理, 用loader配置
loader: "url-loader",
options:{
// 配置圖片打包loader
// 圖片大小低于8kb的會打包為base64格式,,超過的處理為文件格式
limit: 8 * 1024
}
}
2.3 配置打包后文件名的長度
上面的打包后發(fā)現(xiàn),圖片的名字都非常長,
我們也可以通過options配置圖片文件名的長度
{
test: /\.(jpg|png|gif)$/,
// 使用一個loader處理, 用loader配置
loader: "url-loader",
options:{
// 配置圖片打包loader
// 圖片大小低于8kb的會打包為base64格式,,超過的處理為文件格式
limit: 8 * 1024,
// 給圖片進行重命名
// [hash:8] 是取圖片打包的hash名的前8位
// [ext] 取圖片原來的文件擴展名
name: '[hash:8].[ext]'
}
}
注意:
上面的配置只能處理CSS或者less等樣式文件中引入的圖片
默認不能處理html通過img標簽引入的圖片
3. 處理html文件引入的圖片
3.1 處理html文件引入圖片的說明
處理html文件中引入圖片的說明:
- 因為html文件時使用
http-webpack-plugin插件將內(nèi)容插入到打包后的html文件中 - 所以我們在html文件中引入的圖片路徑在處理后不會發(fā)生改變
- 因此打包后html文件就找不到圖片,因此顯示不了圖片呢
故而我們需要對html文件進行打包配置
3.2 配置html文件的loader
通過html-loader處理html中引入的圖片
下載loader
$ yarn add html-loader -D
配置loader
{
test: /\.html$/,
// 使用html-loader處理html文件中引入的圖片
// html-loader是專門處理img圖片,引入img,從而被url-loader處理
loader: "html-loader",
}
注意: html-loader專門處理html文件中img標簽引入的圖片
