Vue-cli 2在webpack内使用雪碧图（响应式）

先执行install

　　cnpm install webpack-spritesmith

文件位置

build\webpack.dev.conf.js

添加内容：

const SpritesmithPlugin = require('webpack-spritesmith');

找到　　

文件内　　plugins:

我是生成less文件后，单位rem实现雪碧图的响应式适配，用的是阿里方案页面内需引用flexbile.min.js（参考阿里手淘适配）

目录结构：

添加如下内容：

文件位置：

build\webpack.dev.conf.js

plugins: 内添加如下内容

    new SpritesmithPlugin({// 目标小图标
        src: {cwd: path.resolve(__dirname, '../static/images/icon'),glob: '*.png'},// 输出雪碧图文件及样式文件
        target: {image: path.resolve(__dirname, '../static/images/sprite.png'),css:[[path.resolve(__dirname, '../static/images/sprite.less'),{format: 'function_based_template'}]]},customTemplates: {'function_based_template': path.resolve(__dirname, '../my_handlebars_template.handlebars')},// 样式文件中调用雪碧图地址写法
        apiOptions: {cssImageRef: './sprite.png?v='+Date.parse(new Date())},spritesmithOptions: {algorithm: 'binary-tree'}})

添加文件：my_handlebars_template.handlebars

文件位置：项目根目录下：\my_handlebars_template.handlebars

文件内容：

{{#block "sprites"}}
{{#block "spritesheet"}}
@img:url('{{{spritesheet.escaped_image}}}');
@r:75rem;
.icon{background-size: {{spritesheet.width}}/@r {{spritesheet.height}}/@r;background-repeat:no-repeat;display:inline-block;
};
{{/block}}
{{#each sprites}}
.icon-{{{strings.name}}} {background-image: @img;background-position: {{offset_x}}/@r {{offset_y}}/@r;width: {{width}}/@r;height: {{height}}/@r
};
{{/each}}
{{/block}}

命令行内运行：

　　　　npm run dev　　即可

生成这2个文件引用对应的less文件即可

转载于:https://www.cnblogs.com/NB-JDzhou/p/9182639.html

Vue-cli 2在webpack内使用雪碧图（响应式）相关推荐

html网站雪碧图素材,webpack雪碧图实现（webpack管理小图标素材）
雪碧图也叫CSS精灵, 是一CSS图像合成技术,这里介绍webpack实现雪碧图这是我的文件目录: // 在上个实例项目上增加了icons文件夹: // dist/sprites/目录是后面执行we ...
雪碧图PHP,Webpack中雪碧图插件使用详解
背景在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降.这种情况 ...
webpack雪碧图生成
原文链接:http://dopro.io/webpack-sprites.html 前言在HTTP/2.0还没有普及的现在,css sprite(雪碧图)仍是前端工程化中必备的一环,而随着webpa ...
webpack原理篇（六十二）：实战开发一个自动合成雪碧图的loader
说明玩转 webpack 学习笔记支持的语法对样式里面图片引用后面加 __sprite 进行图片合并如何将两张图片合成一张图片? 使用 spritesmith https://github.c ...
CSS 关于雪碧图预处理和后处理方案的讨论
广告:SF 里弄了个 CSS 小圈子,欢迎一起来讨论问题前端小图标处理方案众多,本文主要介绍基于雪碧图的处理方案,分析雪碧图的预处理和后处理模式的得与失,以及在项目中通常会遇到的问题以及解决方案.其 ...
vue-cli3使用webpack-spritesmith配置雪碧图
一.背景问题项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路使用webp ...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...

Vue-cli 2在webpack内使用雪碧图（响应式）

Vue-cli 2在webpack内使用雪碧图（响应式）相关推荐

最新文章

热门文章