webpack - 通过 Webpack Plugin 一键导入多个文件

Question

我看到了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 为一个 userRequest 处理多个文件？

提前致谢

编辑：

输入

import image from './image.jpg';

输出

console.log(image);

> { 1x: '/images/image.jpg', 2x: '/images/[e-mail]', 3x: '/images/[e-mail]' }

标签： webpacksrcset