Блог

Я работаю над собственным загрузчиком изображений для Webpack 5. Этот загрузчик может выполнять различные манипуляции с исходным изображением, и в результате он отправляет обратно измененное изображение в виде буфера и важного объекта метаданных через асинхронный обратный вызов загрузчика:

 // MyImageLoader.js
module.exports = async function(content) {
  const callback = this.async();

  Image(this.resourcePath, {
    // ...image manipulation options
  }).then(result => {

    // result.imageBuffer is the new image as a Buffer
    // result.metaData object stores the new width, height, mimetype, ext, etc...
    callback(null, result.imageBuffer, null, result.metaData);

  }).catch(err => {
    callback(err);
  });
}
 

… и в моей конфигурации Webpack я использую функцию Asset Modules, чтобы выходной файл переименовывался с использованием информации метаданных, сгенерированной загрузчиком:

 {
  test: /.(jpe?g|png|webp|avif|tiff)$/i,
  type: 'asset',
  generator: {
    filename: (pathData) => {
      // console.debug(pathData);
      // console.debug(pathData.module);

      let filename = '[name]-[width]x[height].[contenthash:8][ext]';

      // now I need to somehow access my metaData
      // to let [width] replaced by metaData.width
      // to let [height] replaced by metaData.height
      // to let [ext] replaced by metaData.ext (the ext of the converted file)
      // ...but it seems impossible...

      return filename;
    }
  },
  use: [
    {
      loader: require.resolve('./MyImageLoader.js'),
      options: { /* some options */ }
    }
  ]
}
 

Итак, мой вопрос:

• как получить доступ к моему metaData (который уже отправлен моим загрузчиком) Rule.generator.filename() ?
• или где / как сохранить мои метаданные в загрузчике, чтобы иметь к ним доступ Rule.generator.filename() ?

Важно отметить, что в моем загрузчике я не хочу использовать специфические свойства Webpack или this._module который устарел.

Любое рабочее решение будет высоко оценено!

Спасибо!