Webpack 插件：如何向模块动态添加加载器？

Question

我正在编写一个 Webpack 插件。在模块解析期间，此插件应该为某些模块动态添加特定的加载器，但不是所有模块。

我现在的想法是利用normal-module-factory'safter-resolve事件。在那里，我可以修改数组data.loaders。一些调试告诉我这个数组包含表单的对象{ loader: string, options: object | undefined }。

我找不到任何关于动态修改每个模块加载器的文档。所以我想知道：

• 这是正确的方法吗？
• 一些（但不是全部）现有loaders条目包含一个附加属性ident，看起来像这样：'ref--0-0'。我应该什么时候设置这个属性，使用什么值？

Answer 1

我不确定这是否是最好的解决方案，但这段代码似乎有效：

class MyPlugin {
  apply(compiler) {
    compiler.plugin('normal-module-factory', normalModuleFactory => {
      normalModuleFactory.plugin('after-resolve', (data, callback) => {
        data.loaders.push({
          loader: ..., // Path to loader
          options: {}
        });
        callback(null, data);
      });
    });
  }
}

module.exports = MyPlugin;

关于额外的ident属性：Webpack 需要能够比较加载器选项。默认情况下，它通过调用JSON.stringify()选项对象，然后比较结果字符串来完成此操作。通过添加ident属性，您可以显式指定选项对象的字符串表示形式。有关详细信息，请参阅/sf/answers/3430436341/。