clone 测试项目, 用vue3作为测试项目
git clone /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,
}),
],
});
