webpack使用雪碧图插件
1.先安装插件
npm install --save-dev webpack-spritesmith
2.配置webpack
配置之前 先引入var SpritesmithPlugin = require('webpack-spritesmith');
在webpack.config.js的插件里面写(plugins)
new SpritesmithPlugin({
// 目标小图标,这里就是你要生成的图片的目录
src: {
cwd: path.resolve(__dirname, './src/assets/imgs/icons'),
glob: '*.png'
},
// 输出雪碧图文件及样式文件,这个是打包后,自动生成的雪碧图和样式,自己配置想生成去哪里就去哪里
target: {
image: path.resolve(__dirname, './dist/sprites/sprite.png'),
css: path.resolve(__dirname, './dist/sprites/sprite.css')
},
// 样式文件中调用雪碧图地址写法
apiOptions: {
cssImageRef: '../sprites/sprite.png'
},
spritesmithOptions: {
algorithm: 'top-down'
}
})
3.打包 npm run build 然后你就会看到生成的png和css
4.页面上引入你生成的css就行了
vue中单页面直接在style里面引入就行了,然后直接用
eg:<i class="icon-u2360"></i>
webpack使用雪碧图插件的更多相关文章
- Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法
在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...
- 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack
因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...
- Vue-cli在webpack内使用雪碧图(响应式)
先执行install cnpm install webpack-spritesmith 文件位置 build\webpack.dev.conf.js 添加内容: const SpritesmithPl ...
- 快速获取雪碧图的图标样式插件 - gulp-css-spriter教程
如何快速把合成好的雪碧图,快速获取图标的样式呢? 用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spri ...
- gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
- vue-cli3使用webpack-spritesmith配置雪碧图
一.背景问题 项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路 使用webp ...
- vue-cli3 使用雪碧图
//vue.config.js const path = require("path"); const SpritesmithPlugin = require("webp ...
- 图标字体 VS 雪碧图——图标字体应用实践
本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...
- gulp 制作雪碧图
雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...
随机推荐
- Maven、SpringBoot框架结构优化
一.创建maven项目,名为test-parent,pom文件如下: ... <artifactId>test-parent</artifactId> <version& ...
- .NET Core开发日志——RequestDelegate
本文主要是对.NET Core开发日志--Middleware的补遗,但是会从看起来平平无奇的RequestDelegate开始叙述,所以以其作为标题,也是合情合理. RequestDelegate是 ...
- 实际体验 .NET Standard 2.0 的魅力
在我们的 .net core 大迁移工程中,有些项目完成了迁移,有些还未迁移,这就带来了一个烦恼——我们自己开发的公用类库如何在 .net core 与 .net framework 项目中共享?如果 ...
- 524 (Div. 2) Masha and two friends
Codeforces Round #524 (Div. 2) C. Masha and two friends 题目链接 题意:较为简单,初始给定这个白黑相交的格子,第一遍把坐标范围内的全部涂白,第二 ...
- 传统DNS的问题与HTTPDNS
本篇学习笔记要掌握两个要点: 传统的 DNS 有很多问题,例如解析慢.更新不及时.因为缓存.转发.NAT 问题导致客户端误会自己所在的位置和运营商,从而影响流量的调度. HTTPDNS 通过客户端 S ...
- /etc/apt/sources.list" E212: Can't open file for writing解决方案
:w !sudo tee % > /dev/null 解决.
- Java 输入/输出——处理流(DataInputStream/DataOutputStream、ByteArrayInputStream/ByteArrayOutputStream)
DataInputStream和DataOutputStream分别继承字节流InputStream和OutputStream,它属于处理流,需要分别“套接”在InputStream和OutputSt ...
- Python生成器表达式
https://www.cnblogs.com/liu-shuai/p/6098218.html 简介: 生成器表达式并不真正的创建数字列表,而是返回一个生成器对象,此对象在每次计算出一个条目后,把这 ...
- 过滤器会拦截 前端页面加载 js文件的请求
学艺不精啊.....之前就总结过博客: JAVA中解决Filter过滤掉css,js,图片文件等问题 结果现在又犯了老错误~ 情况如下: index.jsp 页面的验证码输入栏绑定了异步验证(jQur ...
- 内部排序->插入排序->其它插入排序->表插入排序
文字描述 和之前的插入排序比,表插入排序可以保证排序过程中不移动记录:因此表插入排序所用的存储结构和之前的顺序存储不同,表插入排序采用静态链表类型作为待排记录序列的存储结构,设数组中下标0的分量为表头 ...