{"id":26266118,"url":"https://github.com/calvin-ll/webpack-sharp-loader","last_synced_at":"2025-04-30T16:46:49.289Z","repository":{"id":37088691,"uuid":"313520512","full_name":"Calvin-LL/webpack-sharp-loader","owner":"Calvin-LL","description":"Webpack loader to process images through sharp","archived":false,"fork":false,"pushed_at":"2023-01-24T13:07:55.000Z","size":59843,"stargazers_count":7,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-20T14:45:23.386Z","etag":null,"topics":["image","image-processing","loader","sharp","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Calvin-LL.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-17T05:51:48.000Z","updated_at":"2023-03-11T12:21:39.000Z","dependencies_parsed_at":"2023-02-13T21:45:47.950Z","dependency_job_id":null,"html_url":"https://github.com/Calvin-LL/webpack-sharp-loader","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-sharp-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-sharp-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-sharp-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-sharp-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Calvin-LL","download_url":"https://codeload.github.com/Calvin-LL/webpack-sharp-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251747773,"owners_count":21637404,"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-processing","loader","sharp","webpack"],"created_at":"2025-03-14T03:16:54.277Z","updated_at":"2025-04-30T16:46:49.259Z","avatar_url":"https://github.com/Calvin-LL.png","language":"TypeScript","readme":"# webpack-sharp-loader\n\n[![npm](https://img.shields.io/npm/v/webpack-sharp-loader?style=flat)](https://www.npmjs.com/package/webpack-sharp-loader) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=flat)](https://opensource.org/licenses/MIT)\n\nThis loader enable you to process [sharp](https://sharp.pixelplumbing.com/) on images when webpack bundles them.\n\nAccording to [sharp](https://sharp.pixelplumbing.com/):\n\n\u003e This module supports reading JPEG, PNG, WebP, TIFF, GIF and SVG images.\n\u003e\n\u003e Output images can be in JPEG, PNG, WebP and TIFF formats as well as uncompressed raw pixel data.\n\n## Examples\n\n[React](https://github.com/Calvin-LL/webpack-sharp-loader/tree/main/examples/react)\n\n[Vue](https://github.com/Calvin-LL/webpack-sharp-loader/tree/main/examples/vue)\n\n## Install\n\nInstall with npm:\n\n```bash\nnpm install --save-dev webpack-sharp-loader\n```\n\nInstall with yarn:\n\n```bash\nyarn add --dev webpack-sharp-loader\n```\n\n## Usage\n\nThis 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).\n\nIf you only want to process some but not all images use webpack's `oneOf` (like in the [examples](#examples)).\n\n#### webpack.config.js\n\n```javascript\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      // ...\n      {\n        test: /\\.(png|jpe?g|webp|tiff?)/i,\n        use: [\n          \"file-loader\",\n          {\n            loader: \"webpack-sharp-loader\",\n            options: {\n              processFunction: (sharp) =\u003e sharp.negate(),\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n##### Or if you want to change the file format\n\nDue to limitations of webpack, if you want to change the file format, this loader has to handle saving the file to output.\n\n```javascript\nmodule.exports = {\n  ...\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpe?g|webp|tiff?)/i,\n        use: [\n          {\n            loader: \"webpack-sharp-loader\",\n            options: {\n              toBuffer: false,\n              processFunction: (sharp) =\u003e sharp.negate().webp(),\n              // optional options passed to internal file-loader\n              fileLoaderOptions: {\n                name: \"[name]-[contenthash].[ext]\"\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n\n```\n\n## Options\n\n| Name                                          | Type       | Default     | Description                                                                                                                                           |\n| --------------------------------------------- | ---------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **[`processFunction`](#processfunction)**     | `function` | `undefined` | The function to specify how to process with sharp.                                                                                                    |\n| **[`toBuffer`](#tobuffer)**                   | `boolean`  | `true`      | Whether to output as buffer.                                                                                                                          |\n| **[`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`. |\n\n### `processfunction`\n\nThe function to specify how to process with [sharp](https://sharp.pixelplumbing.com/).\n\nSee [sharp's API page](https://sharp.pixelplumbing.com/api-operation) for details.\n\nThe 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).\n\nThe return type of the function should be an `sharp` object.\n\n### `tobuffer`\n\nWhether to output as buffer.\n\nThis should only be needed if you want to output the image in a different format.\n\nWhen `false`, you'll need to use `\"file-loader\"` or another loader capable of handling raw image files.\n\n### `fileLoaderOptions`\n\nfileLoaderOptions 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.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalvin-ll%2Fwebpack-sharp-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalvin-ll%2Fwebpack-sharp-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalvin-ll%2Fwebpack-sharp-loader/lists"}