Installation

Installing the package

The webpack loader must be added as an npm project dependency:

$ npm install @ipp/webpack

Any additional pipes that you wish to use that are not part of @ipp/core must also be installed seperatly. This lets you explicitly choose features that you would like to enable and reduce the installation size.

$ npm install @ipp/compress @ipp/primitive

Installation problems

If the installation fails, you may need to either downgrade Node.js or install some additional compilers. See the installation problems section in the troubleshooting guide.

Configuring webpack

Next, you must configure webpack to use the @ipp/webpack loader. Depending on your toolchain (create-react-app, next.js, vue-cli, parcel, custom, ...), the method to manually configure the webpack configuration will vary. Refer to the documentation of your chosen tool.

Once you have a way to modify your webpack configuration, you may configure configure new rules to process certain images. Webpack is as flexible as you like, you could for example use different pipelines depending on which folder the image resides in. For this example, we will just attempt to load all images with IPP.

webpack.config.js

module.exports = {
  ...
  rules: [
    {
      loader: require.resolve("@ipp/webpack"),
      test: /.(png|jpg|jpeg|webp)$/,
      options: {
        pipeline: [
          {
            pipe: "resize",
            options: {
              resizeOptions: {
                width: 1280
              }
            },
            save: "[name]-[hash:8][ext]"
          }
        ]
      }
    },
    ...
  ]
...
}

The above regular expression test will match any file with a png, jpg, jpeg or webp extension and use IPP process the image import. In this example, the image is resized to 1280 pixels wide and given a unique file name.

caution

If you already have a generated webpack configuration, such as the one that comes with the create-react-app, it may already have loaders that handle images. You must find a way to disable those loaders, otherwise all loaders that test for the file will be chained together in series.

In order for IPP to work correctly, it requires raw access to the original image and no other loader will understand its JSON export format. To see an example, see the workaround that was used for this website.