使用插件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. c#  委托（Func、Action）
			
    以前自己写委托都用 delegate, 最近看组里的大佬们都用 Func , 以及 Action 来实现, 代码简洁了不少, 但是看得我晕晕乎乎. 花点时间研究一下,记录一下,以便后期的查阅. 1.F ...
    
			
    2. 
						
  2. Linux中文件夹的文件按照时间倒序或者升序排列
			
    1.按照时间升序 命令:ls -lrt 详细解释: -l use a long listing format 以长列表方式显示(详细信息方式) -t sort by modification time ...
    
			
    3. 
						
  3. Hama安装及示例运行
			
    Hama介绍 Apache Hama是一个纯BSP(Bulk Synchronous Parallel)计算框架,模仿了Google的Pregel.用来处理大规模的科学计算,特别是矩阵和图计算. BS ...
    
			
    4. 
						
  4. 决策树学习笔记（Decision Tree）
			
    什么是决策树? 决策树是一种基本的分类与回归方法.其主要有点事模型具有可得性,分类速度快.学习时,利用训练数据,根据损失函数最小化原则建立决策树模型:预测时,对新数据,利用决策树模型进行分类. 决策树 ...
    
			
    5. 
						
  5. nimi SearchEngin 项目思路及算法
			
    最近做一个轻量文本搜索项目,在项目实行过程中,如果使用余弦求网页相似度,不能适应海量网页查重.看了那本<这就是搜索引擎  核心技术详解>后,对simhash算法有一定的理解,并且喜欢上了这 ...
    
			
    6. 
						
  6. 浅析设备管理的MTTR，MTTF，MTBF计算方法
			
    一般来说,对于设备的关键性指标的统计,国际惯例中有三个指标用来进行统计,它们分别是: MTTR(Mean Time To Repair),平均修复时间.计算方法是:总的故障时间/故障次数.计算公式为: ...
    
			
    7. 
						
  7. Linux命令之finger
			
    Linux命令之finger youhaidong@youhaidong-ThinkPad-Edge-E545:~$ finger 程序"finger"尚未安装. 您可以使用以下命 ...
    
			
    8. 
						
  8. org.hibernate.MappingException:Unknown entity:java.util.ArrayList
			
    1.错误描述 [CQ] ERROR [http-apr-8888-exec-3] com.opensymphony.xwork2.util.logging.commons.CommonsLogger. ...
    
			
    9. 
						
  9. ASP.NET Core轻松入门之Configure中IHostingEnvironment和IApplicationLifetime的使用
			
    在StratUp.cs的Configure方法中,除了 常用的参数除了IApplicationBuilder和在我上一篇文章中提到的Iconfiguration点击打开链接 外  还有 IHostin ...
    
			
    10. 
						
  10. jquery对象和js对象的转化
			
    jquery对象和js对象的转化   jquery对象只能使用jqury方法,不能使用js的方法,相反的,js对象也只能使用js的方法,如果js对象使用了jquery方法,那么浏览器就会报错. 但是在 ...
    
			
    11.