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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
JQuery toggle使用分析
Nov 16 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
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
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
python的socket编程入门
2018/01/29 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python 实现绘制整齐的表格
2019/11/18 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
管理心得体会
2013/12/28 职场文书
七一党建活动方案
2014/01/28 职场文书
单位委托书
2014/10/15 职场文书
2015元旦标语横幅
2014/12/09 职场文书
通用员工手册范本
2015/05/14 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers