[FR/DOCS] - Webpack 5 support

[szegheo]

The examples in the documentation of this plugin are for Webpack 4. In Webpack 5 using file-loader is not recommended anymore, the suggested way is to use Asset Modules (link).

It would be great if the plugin could support Webpack 5 by default - 6.0.0 ? -, but until then, I wanted to share my solution using Asset Modules and a possible fix for the output file extension when the format query param is used (convert file to another format):

module.exports = {
  output: {
    // ...
    assetModuleFilename: "[name].[contenthash:8][ext]"
  },
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(jpe?g|png|webp|avif|tiff)$/i,
        type: 'asset',
        generator: {
          filename: (pathData) => {
            // get query params from image url
            const info = pathData.module.resourceResolveData;
            const params = new URLSearchParams(info.query);

            // determine the desired output file extension (or keep existing)
            const format = params.get('format') || path.extname(info.path).split('.').pop();

            // normalize format/extension (lowercase, jpg to jpeg)
            const extension = (ext => ext === 'jpg' ? 'jpeg' : ext)(format.toLowerCase());

            // default filename
            let fileName = '[name].[contenthash:8][ext]';

            // fix extension
            return fileName.replace("[ext]", `.${extension}`);
          }
        },
        use: [
          {
            loader: 'webpack-image-resize-loader',
            options: {
              // ...
            }
          }
        ]
      },
    ],
  },
};

@Calvin-LL maybe you could improve this code with your ideas and update the docs with instructions for Webpack 5, because this plugin is so cool, and official support to Webpack 5 could raise much more attention (I think).

[Calvin-LL]

Thank you!!! I'll take a look.

[szegheo]

Hi again! If you are going to support Asset Modules (doc) of Webpack5 (instead/beside the old file-loader approach), I would like to recommend you this post in my feature request for Webpack. The discussion is about how to properly rename the result asset in an image loader, to let something like

background: url(/assets/hero.jpg?format=webp&width=1920);
compiled to
background: url(/build/hero-1920.e3b326cf.webp;)
(and also proper base64 data URL generation with the corresponding mimetype)

depending on output.assetModuleFilename (doc) or Rule.generator.filename (doc).
In my example it is [name].[contenthash:8][ext].

In the discussion it turned out, that currently it's not easy, because there's no API for this problem yet, but maybe it will be added. If you are interested, follow this thread and share your ideas.