使用插件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. scrapy安装的问题
			
    Found existing installation: six 1.4.1 DEPRECATION: Uninstalling a distutils installed project (six) ...
    
			
    2. 
						
  2. Centos小白学习
			
    目录 查看机器设备信息 有线网络设置(必须) 设置主机名(必须) 设置sudo用户,一般默认只有root可以使用(必须) yum更新源(必须) 安装完Centos后桌面宽度不能自适应 Centos安装 ...
    
			
    3. 
						
  3. Django开发基础----操作数据库
			
    Django中对数据库的操作是由Models来完成的 Models是什么? 通常,一个Model对应数据库的一张数据表 Django中Models以类的形式出现 它包含了一些基本字段以及数据的一些行为 ...
    
			
    4. 
						
  4. Web渗透测试（sql注入 access，mssql，mysql，oracle，）
			
    Access数据库注入: access数据库由微软发布的关系型数据库(小型的),安全性差. access数据库后缀名位*.mdb, asp中连接字符串应用-- "Driver={micros ...
    
			
    5. 
						
  5. Linux基础二
			
    linux命令分类 内部命令:属于shell解释器 外部命令:独立于shell解释器 检查命令类型 type:检查命令字的类型 [root@localhost ~]# type ls ls 是 `ls ...
    
			
    6. 
						
  6. freemarker中的substring取子串
			
    freemarker中的substring取子串 1.substring取子串介绍 (1)表达式?substring(from,to) (2)当to为空时,默认的是字符串的长度 (3)from是第一个 ...
    
			
    7. 
						
  7. Java web切面编程
			
    在我们的 web开发中  我们在 对公用的 一些方法 我们需要抽取出来   这样达到 代码的冗余   今天 我利用项目上用的AOP的 实际 应用做了一个整理 首先  xml配置  扫描 <?xm ...
    
			
    8. 
						
  8. JS实现全选功能
			
    000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...
    
			
    9. 
						
  9. poi导入Excel，数字科学记数法转换
			
    在这里分享一下使用poi 导入Excel时 把数字转换为科学记数法的解决方法: 就是使用DecimalFormat对 i 进行了格式化 结果为:
    
			
    10. 
						
  10. Delphi关于ADO控件的简单使用
			
    控件:TAdoQuery.ADOConnection.TDataSource.TRzDBGrid 1.新建Vcl Form Application 2.在窗体上添加TADOConnection,设置连 ...
    
			
    11.