generate-webp-webpack-plugin

这是一个生成webp图片文件的webpack插件

支持webpack版本

支持webpack3.0+、webpack4.0+

指定二进制文件下载的base url

针对国内用户下载缓慢、下载失败的问题或者内网隔离用户，提供了为cwebp-bin二进制文件配置镜像下载地址的功能。

通过在.npmrc中配置变量:

• 手动写入: cwebp_binary_site=https://npm.taobao.org/mirrors/cwebp-bin

• 通过shell写入: $ echo "cwebp_binary_site=https://npm.taobao.org/mirrors/cwebp-bin" >> .npmrc

服务端需要注意的问题

请求服务端返回webp图片，必须注意服务端需要定义webp图片的MIME。

也就是HTTP Response Headers必须返回Content-Type: image/webp。

安装

npm

$ npm install generate-webp-webpack-plugin --save-dev

yarn

$ yarn add generate-webp-webpack-plugin -D

用法

在webpack plugins数组中实例化generate-webp-webpack-plugin插件

const GenerateWebpWebpackPlugin = require('generate-webp-webpack-plugin')
 
{
    plugins: [
        new GenerateWebpWebpackPlugin()
    ]
}

参数

test

• 类型: { [path: string]: Function } | RegExp

• 默认值: /\.(png|jpe?g)$/

• 用法:

new GenerateWebpWebpackPlugin({
  test: /\.(png|jpe?g)$/
})

匹配所有png、jpg、jpeg图片,然后生成同名的webp图片

format

• 类型: string

• 默认值: [name].webp

• 用法:

new GenerateWebpWebpackPlugin({
  format: '[name].[ext].webp'
})

将最后输出的图片名称格式化

结果如下：

./img/bg.png => ./img/bg.png.webp

webpOptions

webpOptions是imagemin-webp工具的参数，更多设置可以点击imagemin-webp查看

下面介绍两个常用的参数：

quality

• 类型: { number }

• 默认值: 75

• 详细:

quality是设置图片质量的参数，区间是0~100.

• 用法:

new GenerateWebpWebpackPlugin({
  webpOptions: {
    quality: 75
  }
})

method

• 类型: { number }

• 默认值: 4

• 详细:

在0（最快）和6（最慢）之间指定要使用的压缩方法。可以在开发环境将速度调快，生产环境使用默认值。

• 用法:

new GenerateWebpWebpackPlugin({
  webpOptions: {
    method: 0
  }
})

配合运行时插件使用

webp图片已经通过generate-webp-webpack-plugin生成了，接下来项目中引入运行时代码，判断浏览器是否支持并处理兼容问题。

vue

1. 安装vue-webp-plugin

• yarn

yarn add vue-webp-plugin

• npm

npm install vue-webp-plugin --save

1. 在main.js入口文件引入vue-webp-plugin

import Vue from 'vue'
import VueWebp from 'vue-webp-plugin'
 
Vue.use(VueWebp)

1. 使用v-webp指令引入图片

• 设置本地图片路径

<img v-webp="require('../../assets/img/bg.jpg')"/>

• 设置元素背景图片路径

<div v-webp:bg="require('../../assets/img/bg.jpg')"></div>

1. 查看network请求日志可以看到webp图片的效果

bg.jpg图片在原本是221kb

转换后：

联系作者

如果有较紧急的问题或者一些有关于开源代码的idea可以联系作者.