Импорт нескольких файлов с помощью одного импорта через плагин Webpack - PullRequest
0 голосов
/ 16 октября 2018

Я видел NormalModuleReplacementPlugin ( исходный код ) и хотел сделать то же самое, но для изображений srcsets.

Я импортирую изображения следующим образом: import image from './image.jpg', но также хотел бы обрабатывать изображения @ 2x и @ 3x без необходимости их явного импорта (точно так же, как Metro Bundler / React Native).

У меня есть этот псевдо-плагин Webpack:

const path = require('path');

const getSrcSet = (string, number) => string.split('.').join(`@${number}x.`);

class SrcSetPlugin {
  apply(compiler) {    
    const resourceRegExp = /\.jpe?g|png$/i;

    compiler.hooks.normalModuleFactory.tap('SrcSetPlugin', (nmf) => {
      nmf.hooks.beforeResolve.tap('SrcSetPlugin', (result) => {
        if (!result) return;
        if (resourceRegExp.test(result.request)) {
          // pseudo-code to also import other srcSets
          result.request2 = getSrcSet(result.request, 2);
          result.request3 = getSrcSet(result.request, 3);
        }
        return result;
      });
      nmf.hooks.afterResolve.tap('SrcSetPlugin', (result) => {
        if (!result) return;
        if (resourceRegExp.test(result.resource)) {
          console.log(result);
          process.exit(0);

          // pseudo-code to also resolve other srcSets
          result.resource2 = path.resolve(
            path.dirname(result.resource),
            getSrcSet(result.resource.split('/').slice(-1), 2),
          );
          result.resource3 = path.resolve(
            path.dirname(result.resource),
            getSrcSet(result.resource.split('/').slice(-1), 3),
          );
        }
        return result;
      });
    });
  }
}

module.exports = SrcSetPlugin;

Есть ли способ указать Webpack обрабатывать несколько файлов для одного запроса пользователя?

Заранее спасибо

Редактировать:

Ввод

import image from './image.jpg';

Вывод

console.log(image);

> { 1x: '/images/image.jpg', 2x: '/images/image@2x.jpg', 3x: '/images/image@3x.jpg' }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...