webpack 插件 转换图片格式为webp

原文链接: webpack 插件 转换图片格式为webp

上一篇: js Thunk 函数

下一篇: clip-path 绘制css常见图形 制作有趣的动画

clone 测试项目, 用vue3作为测试项目

git clone https://github.com/vuejs/vue-next-webpack-preview.git --depth=1

yarn 

新建插件项目, 并初始化

vue项目中加两个图片展示的文件

插件项目中执行

yarn link

vue中引用

webp-webpack-plugin

插件安装依赖库, 用于写入webpack打包的二进制文件, 可以看做是一个buffer包装层

yarn add webpack-sources

const { RawSource } = require("webpack-sources");
const s = new RawSource(Buffer.from([1, 2, 3]));
console.log(s);

插件index.js

在将所有数据替换完毕之后在调用回调, 表示过程完成, 进行打包

写法上有很大的优化空间, 不过这个只是看看例子而已

const webp = require("webp-converter");
const { RawSource } = require("webpack-sources");

const isImage = (name = "") => {
  const reg = /\.(png|jpg)$/;
  console.log("###isImage", name, reg.test(name));
  return reg.test(name);
};

class WebpPlugin {
  constructor({ quality = 0.6, isDev = true }) {
    this.quality = quality;
    this.isDev = isDev;
    console.log("###WebpPlugin", quality, isDev);
  }

  apply(compiler) {
    compiler.hooks.emit.tapAsync("WebpPlugin", async (compilation, cb) => {
      const images = Object.keys(compilation.assets).filter(isImage);
      console.log("###images", images);
      for (let i of images) {
        console.log(
          "compilation.assets[i]",
          i,
          compilation.assets[i]._value.length
        );
        const raw = compilation.assets[i]._value;
        const data = await webp.buffer2webpbuffer(raw, "jpg", "-q 80");
        compilation.assets[i] = new RawSource(data);
        console.log(
          "===data",
          raw.length,
          data.length,
          raw.length / data.length,
          data.length / raw.length
        );
      }
      cb();
    });
  }
}
console.log("====");
module.exports = WebpPlugin;

vue中添加插件

const WebpPlugin = require("webp-converter-webpack-plugin");
module.exports = (env = {}) => ({
  plugins: [
    new WebpPlugin({
      quality: 0.8,
    }),
  ],
});

效果, 一张是vue的logo , 这个没啥能压缩的, 但也有了一半的压缩率, 一张是我相机拍照, 3M左右, 压缩了十倍

发布, 由于已经有了同名插件, 所以换了名字....

nrm use npm

npm login

npm whoami

npm publish

引入之前用其他项目测试下, 有三张图片

安装

yarn add webp-converter-webpack-plugin

配置

const WebpPlugin = require("webp-converter-webpack-plugin");
module.exports = (env = {}) => ({
  plugins: [
    new WebpPlugin({
      quality: 0.8,
    }),
  ],
});