timse / srcset-loader

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

How to use? #23

Open goowikns opened 6 years ago

goowikns commented 6 years ago

I'm not sure whether I use this right.

So I suppose this plugin creates images depending on the query string you give each image in your html (picture tags)? Or not?

I have the following code:

<picture>
    <source srcset="{{ asset('images/header01.jpg?sizes=575w&placeholder=true') }}" media="max-width: 575px">
    <source srcset="{{ asset('images/header01.jpg?sizes=768w&placeholder=true') }}" media="max-width: 768px">
    <source srcset="{{ asset('images/header01.jpg?sizes=991w&placeholder=true') }}" media="max-width: 991px">
    <source srcset="{{ asset('images/header01.jpg?sizes=1199w&placeholder=true') }}" media="max-width: 1199px">
    <img srcset="{{ asset('images/header01.jpg') }}" alt="My default image">
</picture>

then in my webpack config (using the Laravel framework) I have following config set:

 mix.webpackConfig({
   module: {
     rules: [{
       test: /\.(jpe?g|png|svg|gif)$/,
       resourceQuery: /[?&](sizes|placeholder)(=|&|\[|$)/,
       use: [
         'srcset-loader',
         'image-webpack-loader?optimizationLevel=7&interlaced=false',
       ],
     }],
   }
 });

This code doesn't create any images, it doesn't seem to do anything. Am I using it correctly?

goowikns commented 6 years ago

Awaiting feedback

goowikns commented 6 years ago

Awaiting still