webpack - How do I use webpack5's 'asset/resource' and `ImageMinimizerPlugin` to mirror source directory's file structure?

Question

This is my config

{
plugins: [
    new ImageMinimizerPlugin({
      minimizerOptions: {
        plugins: ['pngquant'],
      },
    }),
    new ImageMinimizerPlugin({
      deleteOriginalAssets: false,
      filename: '[path][name].webp',
      minimizerOptions: {
        plugins: ['imagemin-webp'],
      },
    })
]
}
// ...
appConfig.output.assetModuleFilename = '[path][name][ext]'

Now I want to add the rule

{
    test: /.(jpe?g|png|svg|gif|webp)$/i,
    type: 'asset/resource',
    generator: {
      filename: (source) => {
        return source.filename.replace('assets/', '')
      },
    },
  }

manifest.json

  "build/app.webp": "/build/assets/images/image-error.webp",
  "build/app.jpg": "/build/images/image-error.jpg",

How do I configure webpack so that the webp images end up next to the original images? This rule will only work for the original images, but the webp images will keep the 'assets/' prefix.

Sure I can remove the filename function, but I don't want them to end up in assets. I need them to end-up one folder down due to legacy code.

question from:https://stackoverflow.com/questions/65904582/how-do-i-use-webpack5s-asset-resource-and-imageminimizerplugin-to-mirror-so

Answer 1

Waitting for answers