Contains the official webpack loader that allows direct importing of images that resolves into a manifest object. Intended for end users.
|pipeline||object||The pipeline to use to process images (must be in JS syntax) (required)|
|devBuild||boolean||Whether to also build images when not in production|
|manifest||object||If present, enables manifest mode and acts as the manifest mappings|
|esModule||boolean||Provide the import using the ES import syntax instead of CommonJS|
|outputPath||string||The output path where webpack assets are emitted to|
outputPath are populated with default values. Only the
By default, images are only processed using the provided pipeline if the environmental variable
NODE_ENV is set to
production in your terminal. This is usually automatically set by webpack
when creating the build. Otherwise, the source image is passed through to avoid unnecessary work.
If you would like to also preview the generated formats when not running in production, such as when
running a development server, you may set the
devBuild loader option to
The import mode is determined by the presence of the
manifest option. If it is present, the loader
will use manifest mode, otherwise it defaults to simple mode.
This mode provides only basic information about the source image dimensions, and attempts to
srcset strings for each MIME based on the format file extension. It also provides a
src fallback image for older devices, which is determined as the "most relevant fallback image",
prefereably a JPEG closed to having dimensions of
This mode gives you full control over exported metadata information for each format and the source image, very similar to the the manifest generation of the CLI.
The loader adds some extra metadata information to each format. The
path key corresponds to the
exported image's path, and the
save key correponds to the save key used to mark the format for
Any template literals present in the save key are also processed and replaced by their corresponding metadata values, similar to the way filenames are generated from the save key in the CLI.
A save key of
[width] will be replaced with the resulting format's horizontal dimension.
An example speaks a thousant words.