https://github.com/ijs/webp-webpack-plugin

webpack plugin for making webp format file
https://github.com/ijs/webp-webpack-plugin

image image-webp image2webp sharp webp webpack-plugin

Last synced: about 2 months ago
JSON representation

webpack plugin for making webp format file

• Host: GitHub
• URL: https://github.com/ijs/webp-webpack-plugin
• Owner: ijs
• License: mit
• Created: 2017-06-20T16:02:11.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-06-03T06:49:52.000Z (over 4 years ago)
• Last Synced: 2024-04-28T19:43:36.029Z (8 months ago)
• Topics: image, image-webp, image2webp, sharp, webp, webpack-plugin
• Language: JavaScript
• Homepage: https://ijs.github.io/webp-webpack-plugin/
• Size: 382 KB
• Stars: 40
• Watchers: 3
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# webp-webpack-plugin

![Build Status](https://travis-ci.org/jiangtao/webp-webpack-plugin.svg?branch=master)

[![codecov](https://img.shields.io/codecov/c/github/jiangtao/webp-webpack-plugin.svg?style=flat-square)](https://codecov.io/gh/jiangtao/webp-webpack-plugin)

[![dependencies](https://img.shields.io/david/jiangtao/webp-webpack-plugin.svg?style=flat-square)](https://david-dm.org/jiangtao/webp-webpack-plugin)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/jiangtao/webp-webpack-plugin/master/LICENSE)

[简体中文文档](./README_zh-CN.md)

generate 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.

## Install

```npm

npm i -D webp-webpack-plugin

// or

yarn add -D webp-webpack-plugin

```

## Usage

in the webpack.config.js, the options `webp` refer to [sharp webp options](http://sharp.dimens.io/en/stable/api-output/#webp)

```javascript

plugins: [

    new WebPWebpackPlugin({

        match: /(jpe?g|png)$/,

        webp: {

            quality: 80,

            inject: true, // inject the default runtime code

            injectCode: '' // inject your code

        }

    })

]

```

## WebPWebpackPlugin options

- match regexp that help plugin match the images need to transform to webp

- inject default false. When the value is false, not inject the runtime code. The priority level is lower than the option `injectCode`

- injectCode default ''. If the value is not empty, the priority level is more than the option `inject`

- limit default 0. If the image is smaller than the limit (in bytes) the image will not be transformed to webp

- checkStrict default false. Check the transformed image rule. If false, use the `match` options, else limit `png`, `jpeg`, `jpg` suffix image.

- format default `[name].[ext].webp`, another is `[name].webp`. In order to support more names.

tips： the inject runtime code help to replace the image src with webp format.

## principle

- webp transform

change 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

- inject runtime code

Thanks to [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) that support  [event hooks](https://github.com/jantimon/html-webpack-plugin#events)

## diff version webpack

[diff version webpack comparison and configuration](https://github.com/jiangtao/webpack-diff-version-test)

## ChangeLog

- [2017-09-19] inject the code that can replace the img src by support webp and developers can inject your custom code

- [2017-10-05] add tests, travis, eslint and fix webpack2,3 bugs

- [2017-11-29] add limit options,  if image size is bigger than the limit, transform to webp, else not。

- [2017-12-09] support two webp format `[name].[ext].webp` 和 `[name].webp`

## LICENSE

[MIT](./LICENSE)