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

												


											
webpack学习（七）打包压缩图片的更多相关文章
	

    
								
  1. webpack学习笔记——打包后直接访问页面，图片路径错误
		
    我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 ...
    
		
    2. 
						
  2. Vue -- webpack 项目自动打包压缩成zip文件
		
    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能 ...
    
		
    3. 
						
  3. webpack学习笔记——打包js
		
    1.新建一个入口js文件,如entry.js,代码如下: document.write("It works.") 2.然后编译 entry.js 并打包到 bundle.js(会自 ...
    
		
    4. 
						
  4. vue-webpack项目自动打包压缩成zip文件批处理
		
    为什么需要这个? 使用vue框架开发项目,npm run build这个命令会一直用到,如果需要给后端发包,那你还要打包成zip格式的压缩包,特别是项目提测的时候,一天可能要执行重复好几次,所以才有了 ...
    
		
    5. 
						
  5. webpack提取图片文件打包压缩
		
    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...
    
		
    6. 
						
  6. webpack学习（六）打包压缩js和css
		
    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令we ...
    
		
    7. 
						
  7. webpack压缩图片之项目资源优化
		
    webpack打包时,会根据webpack.config.js 中url-loader中设置的limit大小来对图片进行处理,小于limit的图片转化成base64格式,其余的不做操作.对于比较大的图 ...
    
		
    8. 
						
  8. iOS学习-压缩图片(改变图片的宽高)
		
    压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image  ...
    
		
    9. 
						
  9. Vue项目模板--和--webpack自动化构建工具的---项目打包压缩使用
		
    [首先安装node.js]: 1. 从node.js官网下载并安装node,安装过程很简单. 2. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 npm -v2.3.0 #升 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Nginx 调优经验记录
			
    1.2017年连续爆出5.x版本xshell安全问题和intel的cpu设计漏洞 ,此时我就注意到尽量少暴露自己线上使用的工具以及版本.例如:mysql版本,以及缓存层策略,服务器版本等,以下为 隐藏 ...
    
			
    2. 
						
  2. 【天坑】ASP.net WebAPI跨域调用问题
			
    最近在做一个项目,前端是VUE,后端是WebAPI,业务也就是一些实体的增删改查.在项目开始的时候我就预计到有跨域的问题,所以也找了一下资料,在Web.Config里面加上了配置信息: <htt ...
    
			
    3. 
						
  3. Web／app端自动化测试对比
			
    Web/app端自动化测试 做了一段时间的Android自动化测试,对比个人之前做的web端自动化测试,有一些感想.(由于个人接触的时间也不是太久,很多东西理解也并不深刻,先写下菜鸟时期的感想.) 区 ...
    
			
    4. 
						
  4. TOE(TCP/IP Offload Engine)网卡与一般网卡的区别
			
    TCP减压引擎,第一次听说这个名词,但是并不是一个新的概念了,若干年前听说过设备厂商在研究在FPGA之中实现TCP Stack,但是后来没有听到任何的产品出来,应该是路由设备to host的traff ...
    
			
    5. 
						
  5. linux 时间和日期的设置
			
    Linux机器上的时间比较复杂,有各式各样的时钟和选项等等.机器里有两个时钟,硬件时钟从根本上讲是CMOS时钟,而系统时钟是由内核维护的. 1. 修改硬件时钟 (1)更新机器的硬件时间.命令为:hwc ...
    
			
    6. 
						
  6. 中断处理程序不能使用printf的本质
			
    vxworks 中断处理程序之所以不用printf,本质在于printf是将信息输出到标准输出设备(STDOUT)中, 整个标准输出设备是一个全局变量,由于有semTake操作,那么就会发生阻塞,vx ...
    
			
    7. 
						
  7. Caused by: java.lang.ClassNotFoundException: org.hibernate.engine.FilterDefinition
			
    1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...
    
			
    8. 
						
  8. Linux显示内存状态
			
    Linux显示内存状态 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free total used free shared buffers cached M ...
    
			
    9. 
						
  9. hdu5788 level up
			
    贴下以前写的代码 比赛前我准备着重看的 主席树 树dp 字符串 #include<bits/stdc++.h> using namespace std; typedef long long ...
    
			
    10. 
						
  10. Python Web-第三周-Networks and Sockets（Using Python to Access Web Data）
			
    1.Networked Programs 1.Internet 我们现在学习Internet部分,即平时我们浏览器做的事情,之后再学习客服端这部分 2.TCP 传输控制协议 3.Socket HTTP ...
    
			
    11.