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 3D球状导航的文章分类
Jul 06 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
BootStrap selectpicker
Jun 20 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
js实现下拉框二级联动
Dec 04 Javascript
微信小程序-API接口安全详解
Jul 16 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 动态执行带有参数的类方法
2009/04/10 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
List Installed Software Features
2007/06/11 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python检测远程端口是否打开的方法
2015/03/14 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
简历自荐信
2013/12/02 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
《学棋》教后反思
2014/04/14 职场文书
学习之星事迹材料
2014/05/17 职场文书
借条格式范本
2015/05/25 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书