使用插件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. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)
			
    前言 朋友们, 大家好,我还是Rector,写ASP.NET MVC 5系列文章[一步一步创建ASP.NET MVC5程序Repository+Autofac+Automapper+SqlSugar] ...
    
			
    2. 
						
  2. 使用simhash库来进行网页去重
			
    首先感谢作者yanyiwu贡献的开源项目https://github.com/yanyiwu/simhash.在做项 目过程中,翻了一遍<这就是搜索引擎  核心技术详解>这本书的查重算法, ...
    
			
    3. 
						
  3. Maven就是这么简单
			
    什么是Maven Maven是一个采用纯Java编写的开源项目管理工具, Maven采用了一种被称之为Project Object Model (POM)概念来管理项目,所有的项目配置信息都被定义在一 ...
    
			
    4. 
						
  4. redis的密码设置（windows与linux相同）
			
    接着我们昨天的说,昨天redis的启动已经了解,今天来说说redis的密码设置.(不管怎么说redis也是数据库,也需要密码) 修改密码可以2种行径.第一种,直接修改配置文件,打开redis.conf ...
    
			
    5. 
						
  5. sparklyr包：实现Spark与R的接口+sparklyr 0.5
			
    本文转载于雪晴数据网 相关内容: sparklyr包:实现Spark与R的接口,会用dplyr就能玩Spark Sparklyr与Docker的推荐系统实战 R语言︱H2o深度学习的一些R语言实践-- ...
    
			
    6. 
						
  6. AFDX总线协议规范
			
    AFDX总线协议规范 1.概述 2. AFDX简介 3.AFDX的在数据传输性能的改进 3.1 AFDX以太网帧格式 3.2 AFDX以太网冗余备份 3.3 虚拟连接 3.4 数据交换处理 4.航空计 ...
    
			
    7. 
						
  7. dedecms 在php5.4以上环境下 无法保存中文
			
    dedecms gbk版本在php5.4以上环境下 无法保存中文 原因在于5.4.0对这个函数的变化:htmlspecialchars5.4.0   The default value for the ...
    
			
    8. 
						
  8. vxWorks应用程序加载的另一种办法
			
    现在我们的工作中,应用程序一般都是和BSP联编,然后将vxworks_rom.bin烧到班子里.在BSP启动后,调用应用程序的函数的. 但是这样有个问题,就是应用程序和BSP结合的太紧密了.BSP开发 ...
    
			
    9. 
						
  9. JavaScript小括号、中括号、大括号的多义性
			
    语义1,函数声明时参数表 func(arg1,arg2){ // ... } 语义2,和一些语句联合使用以达到某些限定作用 // 和for in一起使用 for(var a in obj){ // . ...
    
			
    10. 
						
  10. 下拉框的change事件
			
    6.1,获取下拉框的值(html标签中没有onchange事件的) <script language="javascript"> $(document).ready(f ...
    
			
    11.