webpack打包圖片
- 在js中創(chuàng)建圖片來引入
- 在css來引入尸闸，比如background：url()
- 在html中寫死，<img src="">
1.js中引入圖片
必須使用import require引入
import img from './Zebras.jpg' //引入圖片堕担，返回結(jié)果是新的圖片地址
let image = new Image();
image.src = img;
document.body.appendChild(image);
file-loader:默認(rèn)會在內(nèi)部生成一張圖片到build目錄下，把生成的圖片名字返回回來
yarn add file-loader -D
{
test:/\.(png|gif|jpg)$/,
use: [{
loader: "file-loader"
}]
}
2.css中引入
body {
margin: 10px;
background: url("./Zebras.jpg");
}
css-loader默認(rèn)支持這種方式曲聂，實(shí)際會將地址替換為require('url')
3.在模板html文件中使用標(biāo)簽引入
yarn add html-withimg-loader -D
{
test:/\.html$/,
use: [{
loader: "html-withimg-loader"
}]
},
小圖片base64
yarn add url-loader -D
將file-loader改為url-loader,上面三種引入只要滿足條件霹购，均會變成base64
{
//圖片小于一定大小使用base64 否則使用file-loader產(chǎn)生真實(shí)圖片
test: /\.(png|gif|jpg)$/,
use: [{
loader: "url-loader",
options: {
limit: 1,//小于限定使用base64
outputPath:'img/' //圖片輸出的路徑
}
}]
}
base64會比原圖大1/3。
