webpack-sharp-loader

This loader enable you to process sharp on images when webpack bundles them.

According to sharp:

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

Vue

Install

Install with npm:

npm install --save-dev webpack-sharp-loader

Install with yarn:

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

webpack.config.js

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.

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 | function | undefined | The function to specify how to process with sharp. | | toBuffer | boolean | true | Whether to output as buffer. | | fileLoaderOptions | object | undefined | Additional options for the internal file-loader. Only used when toBuffer is false. |

processfunction

The function to specify how to process with sharp.

See sharp's API page 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.

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 to save a file. Go to file-loader to find the available options.