webpack打包图片
- 在js中创建图片来引入
- 在css来引入，比如background：url()
- 在html中写死，<img src="">
1.js中引入图片
必须使用import require引入
import img from './Zebras.jpg' //引入图片，返回结果是新的图片地址
let image = new Image();
image.src = img;
document.body.appendChild(image);
file-loader:默认会在内部生成一张图片到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默认支持这种方式，实际会将地址替换为require('url')
3.在模板html文件中使用标签引入
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产生真实图片
test: /\.(png|gif|jpg)$/,
use: [{
loader: "url-loader",
options: {
limit: 1,//小于限定使用base64
outputPath:'img/' //图片输出的路径
}
}]
}
base64会比原图大1/3。
