Disable Optimization Per File

[Daniel Berezin]

Not all images are born equal. Sometimes you want some images to be compressed more than others (e.g., a background image stretched across the entire page vs a thumbnail), and sometimes you don't want a particular image to be compressed.

Is there currently a way to do that using this plugin aside from adding specific rules to your webpack config?

I tried using the inline loader syntax (!!file-loader!../../assets...) to no avail.

[Thomas Coopman]

There is currently no way of doing this.

How would you propose this would look like?
Are there any other people with such needs?

[Daniel Berezin]

There is currently no way of doing this.

I looked at !!file-loader!../../assets... again and this actually does work, just not in scss files for some reason (this seems to be related to resolve-url-loader). This works, but also has the problem of forcing you to re-write your entire loader configuration inline.

How would you propose this would look like?

Ideally query params are the way to go. Something like responsive-loader. So it would look like myImage.jpg?unoptimized, or perhaps even enable per-file performance tuning (myImage.jpg?quality=85).

[Daniel Berezin]

I figured out how to do this in webpack 4, you can use the resourceQuery flag.

Here's my config

{ test: /\.(png|jpe?g|mp3|wav|ogg)$/, loader: 'file-loader' },
{ test: /\.(png|jpe?g|mp3|wav|ogg)$/, loader: 'image-webpack-loader', resourceQuery: str => !/unoptimized/.test(str) },