https://github.com/calvin-ll/webpack-sharp-loader
Webpack loader to process images through sharp
https://github.com/calvin-ll/webpack-sharp-loader
image image-processing loader sharp webpack
Last synced: 9 months ago
JSON representation
Webpack loader to process images through sharp
- Host: GitHub
- URL: https://github.com/calvin-ll/webpack-sharp-loader
- Owner: Calvin-LL
- License: mit
- Created: 2020-11-17T05:51:48.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-24T13:07:55.000Z (about 3 years ago)
- Last Synced: 2025-04-20T14:45:23.386Z (9 months ago)
- Topics: image, image-processing, loader, sharp, webpack
- Language: TypeScript
- Homepage:
- Size: 57.1 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-sharp-loader
[](https://www.npmjs.com/package/webpack-sharp-loader) [](https://opensource.org/licenses/MIT)
This loader enable you to process [sharp](https://sharp.pixelplumbing.com/) on images when webpack bundles them.
According to [sharp](https://sharp.pixelplumbing.com/):
> This module supports reading JPEG, PNG, WebP, TIFF, GIF and SVG images.
>
> Output images can be in JPEG, PNG, WebP and TIFF formats as well as uncompressed raw pixel data.
## Examples
[React](https://github.com/Calvin-LL/webpack-sharp-loader/tree/main/examples/react)
[Vue](https://github.com/Calvin-LL/webpack-sharp-loader/tree/main/examples/vue)
## Install
Install with npm:
```bash
npm install --save-dev webpack-sharp-loader
```
Install with yarn:
```bash
yarn add --dev webpack-sharp-loader
```
## Usage
This loader outputs a raw image file by default. `"file-loader"` or another loader capable of handling image files should be place before this loader (_before_ since webpack loaders are run from the last one to the first).
If you only want to process some but not all images use webpack's `oneOf` (like in the [examples](#examples)).
#### webpack.config.js
```javascript
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(png|jpe?g|webp|tiff?)/i,
use: [
"file-loader",
{
loader: "webpack-sharp-loader",
options: {
processFunction: (sharp) => sharp.negate(),
},
},
],
},
],
},
};
```
##### Or if you want to change the file format
Due to limitations of webpack, if you want to change the file format, this loader has to handle saving the file to output.
```javascript
module.exports = {
...
module: {
rules: [
{
test: /\.(png|jpe?g|webp|tiff?)/i,
use: [
{
loader: "webpack-sharp-loader",
options: {
toBuffer: false,
processFunction: (sharp) => sharp.negate().webp(),
// optional options passed to internal file-loader
fileLoaderOptions: {
name: "[name]-[contenthash].[ext]"
},
},
},
],
},
],
},
};
```
## Options
| Name | Type | Default | Description |
| --------------------------------------------- | ---------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **[`processFunction`](#processfunction)** | `function` | `undefined` | The function to specify how to process with sharp. |
| **[`toBuffer`](#tobuffer)** | `boolean` | `true` | Whether to output as buffer. |
| **[`fileLoaderOptions`](#fileloaderoptions)** | `object` | `undefined` | Additional options for the internal [file-loader](https://github.com/webpack-contrib/file-loader). Only used when [`toBuffer`](#tobuffer) is `false`. |
### `processfunction`
The function to specify how to process with [sharp](https://sharp.pixelplumbing.com/).
See [sharp's API page](https://sharp.pixelplumbing.com/api-operation) for details.
The function is called with a parameter named `sharp`, it is an object of the same type as the `sharp()`'s in [sharp's API page](https://sharp.pixelplumbing.com/api-operation).
The return type of the function should be an `sharp` object.
### `tobuffer`
Whether to output as buffer.
This should only be needed if you want to output the image in a different format.
When `false`, you'll need to use `"file-loader"` or another loader capable of handling raw image files.
### `fileLoaderOptions`
fileLoaderOptions is passed as the options object internally to [file-loader](https://github.com/webpack-contrib/file-loader) to save a file. Go to [file-loader](https://github.com/webpack-contrib/file-loader) to find the available options.