Examples to not account for Webpacks default images rule

[TrevinAvery]

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.