webpack学习（七）打包压缩图片

chaixiaozhi 2021-12-14 原文

使用插件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;
}