Webpack5 Asset Module中Module.issuer弃用警告及获取compilation方法问询

问题分析 #

你当前的Webpack图片规则中，通过module.issuer.resource判断图片是否被Less或Vue样式引入，以此决定是否转base64，但该API已被废弃，官方要求改用compilation.moduleGraph.getIssuer(module)。但dataUrlCondition的回调参数中没有直接提供compilation对象，无法直接调用新API。

推荐解决方案：拆分规则（无需依赖废弃API） #

利用Webpack规则的issuer字段直接匹配引入图片的文件，将两种场景拆分为独立规则，完全避开废弃API的使用：

module.exports = {
  module: {
    rules: [
      // 规则1：匹配被Less或Vue样式引入的图片，直接转为base64
      {
        test: /\.(png|jpe?g|gif|bmp|svg|webp)(\?.*)?$/, // 修正原配置中bpm的笔误为bmp
        issuer: [
          /\.less$/,
          /\.vue&type=style/
        ],
        type: 'asset/inline'
      },
      // 规则2：匹配其他场景的图片，按文件大小判断是否转base64
      {
        test: /\.(png|jpe?g|gif|bmp|svg|webp)(\?.*)?$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8092 // 对应原配置的8092字节阈值
          }
        },
        // 可添加其他配置如generator等
        // ...
      }
    ]
  }
}

备选方案：通过插件获取moduleGraph（不推荐，时机易出问题） #

如果必须保留单规则逻辑，可以通过自定义Webpack插件将moduleGraph关联到模块上，但需注意dataUrlCondition的执行时机可能早于模块注册到moduleGraph的时间，存在获取不到issuer的风险：

1. 编写自定义插件 #

class ModuleGraphHelperPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('ModuleGraphHelperPlugin', (compilation) => {
      const moduleGraph = compilation.moduleGraph;
      // 监听模块解析钩子，给模块添加获取issuer的方法
      compilation.hooks.normalModuleParser.tap('ModuleGraphHelperPlugin', (parser, module) => {
        module.getIssuerFromGraph = () => moduleGraph.getIssuer(module);
      });
    });
  }
}

2. 在Webpack配置中使用插件并修改规则 #

module.exports = {
  plugins: [new ModuleGraphHelperPlugin()],
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|bmp|svg|webp)(\?.*)?$/,
        type: 'asset',
        parser: {
          dataUrlCondition: function(source, { module }) {
            const issuer = module.getIssuerFromGraph?.();
            if (issuer && /\.less|vue&type=style/.test(issuer.resource)) {
              return true;
            }
            return source.length < 8092;
          }
        },
        // ...其他配置
      }
    ]
  }
}

注意事项 #

• 原配置中的bpm是笔误，应为bmp（位图格式的正确后缀），建议修正避免匹配错误。
• 拆分规则的方式更符合Webpack的设计逻辑，且无需担心API兼容性问题，是优先选择的方案。

内容的提问来源于stack exchange，提问作者jiande.gao