webpack中如何使用雪碧图的示例代码


Posted in Javascript onNovember 11, 2018

一、什么是雪碧图?

CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

二:为什么要用雪碧图

结合我们公司的需求来说,因为有很多组件,每个组件下有大概50张图片,每张图片是一个请求,也就是发了300多个请求,这样是很可怕的,所以为了优化性能,减少http请求,决定采用雪碧图的形式。

雪碧图是将你想要的很多张图片整理成一张图片,然后通过background-*来进行图片识别和定位来达到之前的效果。

三:如何使用雪碧图

雪碧图在之前有很多方式,如ps之类,现在最佳的方案还是在webpack-spritesmith。

我其实对webpack并不是很了解,我现在列出使用方法和我在使用webpack时候遇到的问题。

1.安装

执行命令行:npm install --save-dev webpack-spritesmith

2.在webpack.config.js中写入

var path = require('path')

 var SpritesmithPlugin = require('webpack-spritesmith')

 //自定义样式
 var templateFunction = function (data) {
  var shared = '.ico { background-size: TWpx THpx }'
    .replace('TW', data.sprites[0].total_width / 2)
    .replace('TH', data.sprites[0].total_height / 2)

  var perSprite = data.sprites.map(function (sprite) {
    return '&.element-N {\n width: Wpx;\n height: Hpx;\n background-position: Xpx Ypx;\n}'
      .replace('N', sprite.name)
      .replace('W', sprite.width / 2)
      .replace('H', sprite.height / 2)
      .replace('X', sprite.offset_x / 2)
      .replace('Y', sprite.offset_y / 2)
      .replace('TW', sprite.total_width / 2)
      .replace('TH', sprite.total_height / 2)
  }).join('\n')

  return shared + '\n' + perSprite
 }

 module.exports = {
   ...
   module: {
     rules: [
       {test: /\.styl$/, use: [
         'style-loader',
         'css-loader',
         'stylus-loader'
       ]},
       {test: /\.png$/, use: [
         'file-loader?name=i/[hash].[ext]'
       ]}
     ]
   },
   resolve: {
     modules: ['node_modules', 'spritesmith-generated']
   },
   plugins: [
     new SpritesmithPlugin({
       src: { //引入路径
         cwd: path.resolve(__dirname, 'src/images/ios/'),
         glob: '*.png'
       },
       target: { //输出路径
         image: path.resolve(__dirname, 'src/spritesmith-generated/ios.png'),
         css: [
          [path.resolve(__dirname, 'src/spritesmith-generated/sprite-1.css'), {
            format: 'function_based_template'
          }],
          [path.resolve(__dirname, 'src/spritesmith-generated/sprite-2.css'), {
            format: 'handlebars_based_template'
          }]
         ]
       },
       customTemplates: {
        'function_based_template': templateFunction, //自定义输出什么样的css样式
       },
       apiOptions: {
         cssImageRef: 'ios.png'
       }
     })
   ]
 }

3.根据地址更改后执行命令

wbpack

其实这样已经满足了大部分需求,根据需要将你所在的输入和输出地址进行更改即可,可以设置自己想要设置的的css(style-components、styl等),然后直接复制在自己的项目css文件,很有灵活性。

四:需要注意的点

我有的时候指定不同文件下的图片合成一张雪碧图,那该如何呢

例如我的需求是:

  • resources
    • ios
      • images
    • ant
      • images
    • ios
      • images
  • ...

翻译: resources下有几个文件夹(ios、ant、ios),相对应下面images文件夹放着各自对应的图片。

需要注意下,它是支持glob的

src: { 
 //引入路径
 cwd: path.resolve(__dirname, 'src/images/ios/'),
 glob: '*.png' //这里进行更改
},

这里可以参考在这里根据需求进行设置:http://www.globtester.com/

把glob改成

@(wechat|element|ios)/images/*.png

效果

五:更深层次的需求

我其实是想在各自的文件夹下的图片,生成各自文件夹下的雪碧图和css,那该如何实现呢,我写了一部分,还没有写完,感觉遇到了技术难点,我呈现出代码,会继续优化来实现

var path = require('path')
var SpritesmithPlugin = require('webpack-spritesmith')

var platforms = ['android', 'ant', 'element', 'ios', 'wechat']//, 'windows']

// var url = 'ant'
const TARGET = process.env.TARGET

console.log({ TARGET })

module.exports = [TARGET].map(l => {
 console.log(l)
 const url = l

 const fn = (data) => {
  console.log(url)
  var shared = 'background-size: TWpx THpx\n'
    .replace('TW', data.sprites[0].total_width / 2)
    .replace('TH', data.sprites[0].total_height / 2)

  var perSprite = data.sprites.map(function (sprite) {
    return `&.${url}-N {\n width: Wpx;\n height: Hpx;\n background-position: Xpx Ypx;\n}\n`
      .replace('N', sprite.name)
      .replace('W', sprite.width / 2)
      .replace('H', sprite.height / 2)
      .replace('X', sprite.offset_x / 2)
      .replace('Y', sprite.offset_y / 2)
      .replace('TW', sprite.total_width / 2)
      .replace('TH', sprite.total_height / 2)
  }).join('\n')

  return shared + '\n' + perSprite
 }

 return {
  module: {
    rules: [
      {test: /\.styl$/, use: [
        'style-loader',
        'css-loader',
        'stylus-loader'
      ]},
      {test: /\.png$/, use: [
        'file-loader?name=i/[hash].[ext]'
      ]}
    ]
  },
  entry: {
   [url]: path.join(__dirname, url),
  },
  output: {
   path: path.join(__dirname, '../parsed/', url),
   filename: '[name].css'
  },
  resolve: {
    modules: ['node_modules', 'spritesmith-generated']
  },
  plugins: [
    new SpritesmithPlugin({
      src: {
        cwd: path.resolve(__dirname, 'images/'+url+'/'),
        glob: '*.png' // '@(android|ant|element|ios|wechat|windows)/*.png'
      },
      target: {
        image: path.resolve(__dirname, '../parsed/'+url+'/'+url+'.png'),
        css: [
          [path.resolve(__dirname, '../parsed/'+url+'/'+url+'.css'), {
            format: 'function_based_template'
          }]
        ]
      },
      customTemplates: {
        'function_based_template': fn
      }
    })
  ]
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery操作input type=radio的实现代码
Jun 14 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
javascript闭包的理解
Apr 01 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
vue组件从开发到发布的实现步骤
Nov 11 #Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 #Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 #Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 #Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 #Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 #Javascript
AngularJS上传文件的示例代码
Nov 10 #Javascript
You might like
phpinfo 系统查看参数函数代码
2009/06/05 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
原生js调用json方法总结
2018/02/22 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python六大开源框架对比
2015/10/19 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
个人简历的自荐信
2013/10/23 职场文书
毕业生个人求职的自我评价
2013/10/28 职场文书
电大本科自我鉴定
2014/02/05 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
公民授权委托书范本
2014/09/17 职场文书
试用期自我评价范文
2015/03/10 职场文书
慰问信格式规范
2015/03/23 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书