使用插件webpack-spritesmith生成雪碧图
1、安装webpack-spritesmith；
npm install --save-dev webpack-spritesmith
2.配置webpack.config.js
new SpritesmithPlugin({ //生成的雪碧图本身就压缩了图片大小
src: {
cwd: path.resolve(__dirname, 'src/image/icon'), //准备合并成sprit的图片存放文件夹
glob: '*.png' //哪类图片
},
target: {
image: path.resolve(__dirname, 'dist/sprites/sprites.png'), // sprite图片保存路径
css: path.resolve(__dirname, 'dist/sprites/_sprites.css') // 生成的css保存在哪里
},
apiOptions: {
cssImageRef: "../sprites/sprites.png" //css根据该指引找到sprite图
}
}),
贴一张目录
3、执行webpack打包指令,执行后打包生成dist/sprites/文件
4、index.html文件中引入sprite.css，如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
<link href="bundle.3a78e3af7afe10200470.css" rel="stylesheet"></head>
<link href="sprites/_sprites.css" rel="stylesheet"> //引用就可以了
</head>
<body>
<!--测试webpack-->
<div class="test">测试webpack</div>
<div class="test1">测试webpack1</div>
<div class="icon-a">a</div> //需要的地方来用就可以了
<div class="icon-b">b</div>
<script type="text/javascript" src="bundle-3a78e3af7afe10200470.js"></script>
</body>
</html>
合成后的sprites.png
合成后的sprites.css
.icon-a { //名称为icon+图片名
background-image: url(../sprites/sprites.png);
background-position: 0px 0px;
width: 50px;
height: 50px;
}
.icon-b {
background-image: url(../sprites/sprites.png);
background-position: -50px 0px;
width: 50px;
height: 50px;
}
.icon-c {
background-image: url(../sprites/sprites.png);
background-position: 0px -50px;
width: 50px;
height: 50px;
}
5.适用的场景