timse / srcset-loader

Flexible srcset-loader for webpack
46 stars 14 forks source link

webpack2 issue #5

Open cvle opened 7 years ago

cvle commented 7 years ago

Hi I'm on webpack2 and this regexp doesn't seem to work: /.*\.(jpe?g|png)\?sizes/ The query string apparently is never included in the test.

cvle commented 7 years ago

So now I'm just doing:

require("srcset-loader?sizes=250w+500w+800w!~media/urban.jpg")

This gets appended to the loaders in the config and it works just fine.

Julien76 commented 7 years ago

Hi,

I'm having the same issue.

@cvle Do you a know a way to require dynamically, like:

require(`srcset-loader?sizes=$(imageSizes)!~$(imageUrl)`)

All my attempts failed so far :(

ephys commented 7 years ago

While the querystring is not included in the test, it can still be read by srcset-loader. i.e. this still works:

import pic3 from 'srcset-loader!./picture.png?sizes=500w';

A potential solution could be to move the check for ?sizes & ?placeholder from the webpack configuration to the loader itself. The loader would then only transform the code if it detects these query parameters.

Although it's likely not a good idea to hardcode that check in the loader. What about creating another loader which does that check and delegates to srcset-loader ? Something like srcset-loader/safe ?

Edit: @Julien76 I don't think this kind of query would work unless it is statically analysable by webpack (https://webpack.js.org/guides/dependency-management/#require-with-expression)

ephys commented 7 years ago

This works for me as a temporary fix: https://gist.github.com/Ephys/0a7d01539a6fdc14042a14a2b848e379

herschel666 commented 7 years ago

Check out the resourceQuery-property. Maybe this could help you.

ephys commented 7 years ago

@herschel666 It looks like exactly what we need, thank you :)

timse commented 7 years ago

hum this is odd, sorry for the late reply, apparently i dont get notifications for my own repositories if i dont actively watch them.

Happy for a PR to accept some sort of option method that gets called with the resource query to make shift that check.

something like:

{
    loader: 'srcset-loader',
    options: {
        filter: (request, resourceQuery) => ...
    }
}

not sure what the best way would be and what params to best pass, maybe just the whole loader context ;)