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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
angularJS开发注意事项
May 26 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
jquery实现拖动效果
2016/08/10 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python的debug实用工具 pdb详解
2019/07/12 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
QML使用Python的函数过程解析
2019/09/26 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
悬挂训练绳:TRX
2017/12/14 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
GMP办公室主任岗位职责
2014/03/14 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技