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 .tmpl(), .template()学习资料小结
Jul 18 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
7个Javascript地图脚本整理
2009/10/20 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python3中property使用方法详解
2019/04/23 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python用requests实现http请求代码实例
2019/10/31 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
女娲补天教学反思
2014/02/05 职场文书
新闻发布会主持词
2014/03/28 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
演讲比赛主持词
2015/06/29 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS