{"id":13801733,"url":"https://github.com/ijs/webp-webpack-plugin","last_synced_at":"2025-05-13T11:31:45.223Z","repository":{"id":77114016,"uuid":"94910128","full_name":"ijs/webp-webpack-plugin","owner":"ijs","description":"webpack plugin for making webp format file","archived":false,"fork":false,"pushed_at":"2020-06-03T06:49:52.000Z","size":391,"stargazers_count":40,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-28T19:43:36.029Z","etag":null,"topics":["image","image-webp","image2webp","sharp","webp","webpack-plugin"],"latest_commit_sha":null,"homepage":"https://ijs.github.io/webp-webpack-plugin/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ijs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-06-20T16:02:11.000Z","updated_at":"2024-04-28T19:43:36.030Z","dependencies_parsed_at":"2023-03-02T03:00:40.206Z","dependency_job_id":null,"html_url":"https://github.com/ijs/webp-webpack-plugin","commit_stats":null,"previous_names":["jiangtao/webp-webpack-plugin"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijs%2Fwebp-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijs%2Fwebp-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijs%2Fwebp-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijs%2Fwebp-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ijs","download_url":"https://codeload.github.com/ijs/webp-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253932935,"owners_count":21986480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","image-webp","image2webp","sharp","webp","webpack-plugin"],"created_at":"2024-08-04T00:01:26.553Z","updated_at":"2025-05-13T11:31:40.205Z","avatar_url":"https://github.com/ijs.png","language":"JavaScript","readme":"# webp-webpack-plugin\n\n![Build Status](https://travis-ci.org/jiangtao/webp-webpack-plugin.svg?branch=master)\n[![codecov](https://img.shields.io/codecov/c/github/jiangtao/webp-webpack-plugin.svg?style=flat-square)](https://codecov.io/gh/jiangtao/webp-webpack-plugin)\n[![dependencies](https://img.shields.io/david/jiangtao/webp-webpack-plugin.svg?style=flat-square)](https://david-dm.org/jiangtao/webp-webpack-plugin)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/jiangtao/webp-webpack-plugin/master/LICENSE)\n\n[简体中文文档](./README_zh-CN.md)\n\ngenerate the webp image, make the same `hash` of original image. For example, `vue.e3e41b1.jpg` and `vue.e3e41b1.jpg.webp` exists at the same env.\n\n## Install\n\n```npm\nnpm i -D webp-webpack-plugin\n// or\nyarn add -D webp-webpack-plugin\n```\n\n## Usage\n\nin the webpack.config.js, the options `webp` refer to [sharp webp options](http://sharp.dimens.io/en/stable/api-output/#webp)\n\n```javascript\nplugins: [\n    new WebPWebpackPlugin({\n        match: /(jpe?g|png)$/,\n        webp: {\n            quality: 80,\n            inject: true, // inject the default runtime code\n            injectCode: '' // inject your code\n        }\n    })\n]\n```\n\n## WebPWebpackPlugin options\n\n- match regexp that help plugin match the images need to transform to webp\n- inject default false. When the value is false, not inject the runtime code. The priority level is lower than the option `injectCode`\n- injectCode default ''. If the value is not empty, the priority level is more than the option `inject`\n- limit default 0. If the image is smaller than the limit (in bytes) the image will not be transformed to webp\n- checkStrict default false. Check the transformed image rule. If false, use the `match` options, else limit `png`, `jpeg`, `jpg` suffix image.\n- format default `[name].[ext].webp`, another is `[name].webp`. In order to support more names.\n\ntips： the inject runtime code help to replace the image src with webp format.\n\n\n## principle\n\n- webp transform\n\nchange the webpack plugin `emit` and modify the  `compilation.assets` object, then generate the webp format image with the same hash as the original img src\n\n- inject runtime code\n\nThanks to [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) that support  [event hooks](https://github.com/jantimon/html-webpack-plugin#events)\n\n## diff version webpack\n\n[diff version webpack comparison and configuration](https://github.com/jiangtao/webpack-diff-version-test)\n\n## ChangeLog\n\n- [2017-09-19] inject the code that can replace the img src by support webp and developers can inject your custom code\n- [2017-10-05] add tests, travis, eslint and fix webpack2,3 bugs\n- [2017-11-29] add limit options,  if image size is bigger than the limit, transform to webp, else not。\n- [2017-12-09] support two webp format `[name].[ext].webp` 和 `[name].webp`\n\n\n## LICENSE\n\n[MIT](./LICENSE)\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fijs%2Fwebp-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fijs%2Fwebp-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fijs%2Fwebp-webpack-plugin/lists"}