一天一点点

使用svg图标

• svg-sprite-loader

webpack配置

{
  test: /\.svg$/,
  include: path.resolve(__dirname, '../src/lib/icon/svg'),
  use: [
    {
      loader: 'svg-sprite-loader',
      options: { // 配合输出单独文件
        extract: true,
        spriteFilename: 'sprite.svg' 
      }
    },
    'svgo-loader' // 压缩svg
  ]
}

...

// 插件
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
plugins: [
  new SpriteLoaderPlugin({
      plainSprite: true
  })
]

...

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        name: 'commons',
        chunks: 'initial',
        minChunks: 2
      }
    }
  }
}

• 自动导入

main.js引入

const request = require.context('./svg', false, /\.svg$/)
request.keys().forEach(request)

• 组件

import React from 'react'

function Icon ({ className = '', style = {}, name }) {
  const selfstyle = {
    // width: '1em',
    // height: '1em',
    // verticalAlign: '-0.15em',
    fill: 'currentColor',
    overflow: 'hidden'
  }
  return (
    <svg className={className} style={{ ...selfstyle, ...style }} aria-hidden='true'>
      <use xlinkHref={'#' + name} />
    </svg>
  )
}

export default Icon

图片png等格式转webp格式

webp-batch-convert

const convert = require('webp-batch-convert');
let res;

// 示例一: 生成 img 目录下的图片文件至 webp 目录
res = convert.cwebp('./img', './webp');
console.log('total: ', res);

/* // 示例二: 生成 img 目录下的图片文件至 webp 目录，附带质量等参数
const cwebpOpts = {
    quiet: true, // 不输出详情
    q: 60 // 质量
};
// 清空输出目录
convert.utils.delDir('./webp');
res = convert.cwebp('./img','./webp', cwebpOpts);
console.log('total: ', res); */