Я видел 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' }