timse / srcset-loader

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

Dynamic paths with rule options raises Error #24

Open ksesong opened 6 years ago

ksesong commented 6 years ago

I can't manage to make srcset-loader work when I have both dynamic paths and loader options.

Here is the webpack.config.js section corresponding to the image rules:

{
    test: /\.(gif|png|jpe?g)$/i,
    include: path.join(__dirname, 'src'),
    oneOf: [
      {
        resourceQuery: /[?&](sizes|placeholder)(=|&|\[|$)/,
        use: ['srcset-loader', 'file-loader?name=[md5:hash:hex].[ext]'],
      },
      {
        use: ['file-loader?name=[md5:hash:hex].[ext]'],
      },
    ],
}

It tries to match images with the srcset-loader if it can find any sizes/placeholder options; or use directly the file-loader if no parameter has been found.

Although this setup works well with static requirement paths, I can't make it work with dynamic paths, while the standalonefile-loader works fine in the same conditions:

require('./assets/image.jpeg'); // works (returns image url)
require('./assets/image.jpeg?sizes=default+10w'); // works (return Object with srcset properties...)

const filename = 'image.jpeg';
require(`./assets/${filename}`); // works (as before, returns image url)
require(`./assets/${filename}?sizes=default+10w`); // does not work ?! (Error: Cannot find module at webpackMissingModule...)