使用插件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. 将vue的项目打包后通过百度的BAE发布到网上的流程
			
    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE.  ...
    
			
    2. 
						
  2. JVM笔记6-垃圾回收概述
			
    JVM进行垃圾回收时要考虑哪的问题如下: 1.如何判定对象为垃圾对象? 1.引用计数法:在对象中添加一个引用计数器,当有地方引用这个对象的时候,引用计数器的值就+1,引用失效的时候,计数器的值就-1, ...
    
			
    3. 
						
  3. Go基础之--操作Mysql(二)
			
    在上一篇文章中主要整理了Golang连接mysql以及一些基本的操作,并进行了大概介绍,这篇文章对增删查改进行详细的整理 读取数据 在上一篇文章中整理查询数据的时候,使用了Query的方法查询,其实d ...
    
			
    4. 
						
  4. （2018干货系列一）最新Java学习路线整合
			
    怎么学Java Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征. 话不多说,直接上干货:  ...
    
			
    5. 
						
  5. 【前端】Vue2全家桶案例《看漫画》之三、引入vuex
			
    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_3.html 项目github地址:https://github.com/shamoyuu/ ...
    
			
    6. 
						
  6. 【Unity3D】Unity3D开发《我的世界》之四、创建一个Block
			
    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_04.html 一.新建Block类 我们的Block类用来存储跟Block相关的信 ...
    
			
    7. 
						
  7. 八爪鱼采集器︱爬取外网数据（twitter、facebook）
			
    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 要想采集海外数据有两种方式:云采集+单机采集. ...
    
			
    8. 
						
  8. javascript parseint
			
    
			
    9. 
						
  9. document.forms[].submit()
			
    document.forms['exportServlet'].submit(); (1)document.forms:表示获取当前页面的所有表单 (2)document.forms[0]:表示获取当 ...
    
			
    10. 
						
  10. 错误号：1364 错误信息：Field 'platId' doesn't have a default value
			
    1. 错误描述 错误号:1364 错误信息:Field 'platId' doesn't have a default value insert into `use`.`t_platform_scal ...
    
			
    11.