works well with libraries such as React, Vue, Angular, etc, as it allows you to then process that
image import, for exemple to generate a
- ES Module
When you import an image, the loader will transform that image behind the scenes by processing it with IPP using the configured pipeline, saving each generated format along with other bundled website assets.
|pipeline||object||The pipeline used to process images with (required)|
|manifest||object||Enables manifest mode, additionaly specifying the manifest mappings|
|devBuild||boolean||Force image processing during development/testing|
|esModule||boolean||Create ES modules instead of CommonJS modules|
|outputPath||string||Specify directory where results should be saved (relative to build directory)|
There are two import modes available. Both modes generate the same image formats.
Simple mode will attempt to do some sane processing of the pipeline result to make it as easy as
possible to plug it into a
It will group images together by format, generating a
srcset string for each one along with each
image's dimensions, and attempt to select the best "fallback" image for the
Additionally, the original height and width are provided to make it easier to calculate layout if
you plan on loading images lazily.
Manifest mode gives you more control over the information that you would like to extract from the
pipeline result. It is enabled by specifying
manifest key in the loader's options.
It is practically identical to the implementation used by the CLI, with support for selectors, limiting, except that you only receive the manifest item for that particular import, and not a list of every single sucessful result. Take a look at the manifest documentation for the CLI to learn more.
To make the development experience more pleasant, images will not be processed in non-production
environments. This is determined by the
NODE_ENV environmental variable which should be set
automatically by Webpack. Instead, images will be passed through untouched with a
It is possible to override this behaviour by specifying a
devBuild: true key in the loader's
options. This may be useful to preview how images will look in the final build.