Fallback Loader

For anyone using background images in their css and having issues with file sizes, I added url-loader and responsive loader as my fallback and Upgraded my node modules.

This will allow images to be linked/referenced and still have the benefits of base64 for images that meet your file size limits for css background images and link to them when they exceed the limits set in your Webpack config. Responsive provides Additions benefits of resizing images on build. I still have not figured that out yet. This is much better than fighting with errors and using workarounds. Check out the documentation on url-loader and responsive-loader.

Hope it helps someone.

My code:

{
test: /.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
include: config.paths.assets,
loader: ‘url-loader’,
options: {
limit: 5096,
esModule: false,
name: [path]${assetsFilenames}.[ext],
fallback: require.resolve(‘responsive-loader’),
},
},
{
test: /.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
include: /node_modules/,
loader: ‘url-loader’,
options: {
limit: 5096,
esModule: false,
outputPath: ‘vendor/’,
name: ${config.cacheBusting}.[ext],
},
},

For making responsive-loader work, I also had to configure the resolve-url-loader:

Sage 10 (Laravel-Mix) required many more configuration changes to make it work.

For very few, very prominent theme images I now use the Squoosh app for the different resolution steps and formats (jpeg/png, webp and avif), copy the command line for each and put them into a script. Then I can run the script every time I changed something, to refresh the different images.

Looks like I may have to use resolve-url-loader. SVGs are getting complained about when using my current config, and PNGS base64 in the CSS. Squoosh looks cool. Any idea why SVGs would get rejected using the current config above?

Updated config to fix SVG loading as base64 in css output. Can turn encoding on or off.
{
test: /.svg$/i,
use: [
{
loader: ‘url-loader’,
options: {
encoding: ‘true’,
},
},
],
},
{
test: /.(ttf|otf|eot|woff2?|png|jpe?g|gif|ico)$/,
include: config.paths.assets,
loader: ‘url-loader’,
options: {
limit: 5096,
esModule: false,
name: [path]${assetsFilenames}.[ext],
fallback: require.resolve(‘responsive-loader’),
},
},
{
test: /.(ttf|otf|eot|woff2?|png|jpe?g|gif|ico)$/,
include: /node_modules/,
loader: ‘url-loader’,
options: {
limit: 5096,
esModule: false,
outputPath: ‘vendor/’,
name: ${config.cacheBusting}.[ext],
fallback: require.resolve(‘responsive-loader’),
},
},
],
},

Config for enabling keepQuery in Sage 10 (Laravel Mix):

mix.webpackConfig({
  module: {
    rules: [
      {
        test: path.resolve('./resources/styles/_responsive.scss'),
        use: [
          {
            loader: 'resolve-url-loader',
            options: {
              sourceMap: true,
              keepQuery: true, // important for image arguments!
            },
          },
        ],
      },
    },
  },
});