专栏首页菜鸟计划webpack学习(七)打包压缩图片

webpack学习(七)打包压缩图片

使用插件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.适用的场景

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack学习(一):webpack 介绍&安装&常用命令

    一、简单介绍 什么是Webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/s...

    柴小智
  • webpack前言:前端模块系统的演进

    前端开发和其他开发工作的主要区别,首先是前端是基于多语言、多层次的编码和组织工作,其次前端产品的交付是基于浏览器,这些资源是通过增量加载的方式运行到浏览器端, ...

    柴小智
  • webpack配置React开发环境(上)

    Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Web...

    牧云云
  • webpack学习(六)打包压缩js和css

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压...

    柴小智
  • 探寻 webpack 插件机制

    webpack 可谓是让人欣喜又让人忧,功能强大但需要一定的学习成本。在探寻 webpack 插件机制前,首先需要了解一件有意思的事情,webpack 插件机制...

    牧云云
  • webpack学习(五)配置详解

    配置详解 //使用插件html-webpack-plugin打包合并html //使用插件extract-text-webpack-plugin打包独立的css...

    柴小智
  • webpack学习(二):先写几个webpack基础demo

    一、先写一个简单demo1 1-1安装好webpack后创建这样一个目录: ? 1-2:向src各文件和dist/index.html文件写入内容: <!DO...

    柴小智
  • web前端工程化利刃——weback简介

    一次内部webpack基础培训的文档和代码分享。简单了解webpack及入门。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? 代码地址: https:...

    itmifen
  • webpack学习(四)extract-text-webpack-plugin插件

    二、extract-text-webpack-plugin插件 从 bundle 中提取文本(CSS)到单独的文件 安装 npm install extract...

    柴小智

扫码关注云+社区

领取腾讯云代金券