srcset-loader icon indicating copy to clipboard operation
srcset-loader copied to clipboard

webpack2 issue

Open cvle opened this issue 8 years ago • 7 comments

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 avatar Feb 10 '17 08:02 cvle

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.

cvle avatar Feb 10 '17 08:02 cvle

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 :(

Julien76 avatar Mar 15 '17 14:03 Julien76

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 avatar Mar 16 '17 11:03 ephys

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

ephys avatar Mar 16 '17 14:03 ephys

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

herschel666 avatar Mar 18 '17 17:03 herschel666

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

ephys avatar Mar 29 '17 12:03 ephys

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 ;)

timse avatar Mar 30 '17 07:03 timse