search

dazuaz / responsive-loader

A webpack loader for responsive images
BSD 3-Clause "New" or "Revised" License
647 stars 74 forks source link

Examples to not account for Webpacks default `images` rule #142

Open TrevinAvery opened 3 years ago

TrevinAvery commented 3 years ago

Webpack's default rule images conflicts with all of the provided examples. To get this to work (at least with a new project created by the vue-cli), you need to either place your new rule before the default rule, or delete the default rule. This detail should be added to the examples.

I don't know how to do this with the standard config, but with chainWebpack, it looks something like this:

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('responsive-loader')
            .before('images')
            .test(/\.(jpe?g|png|webp)$/i)
            // if the import url looks like "some.png?srcset..."
            .resourceQuery(/srcset/)
            .use('responsive-loader')
            .loader('responsive-loader')
            .options({
                adapter: require('responsive-loader/sharp'),
                sizes: [320, 640, 960, 1200, 1800, 2400],
                placeholder: true,
                placeholderSize: 50,
            })
    },
}

Note the use of .before('images'). That part is key. Here is my StackOverflow post from when this caused me hours of pain, just in case.