Webpack插件: how can I modify and re-parse a module after compilation?

Question

我正在开发一个 webpack 插件，但不知道如何在构建过程中修改模块。我正在尝试做的事情:

• 通过自定义加载器收集数据(很好)
• 加载所有模块后，收集我的加载器收集的数据(很好)
• 将我生成的代码插入到构建中的现有模块中(按如下所述执行此操作，不确定这是否是最佳方法)
• “更新”该模块，以便解析我添加的代码并将其“require”转换为 webpack require 调用(无法弄清楚如何正确执行此操作)

目前，我正在编译器上连接“this-compilation”，然后在编译上连接“additional-chunk-assets”。捕获第一个 block (目前唯一的一个，因为我仍在开发中)，迭代该 block 中的模块以找到我想要修改的模块。然后:

• 将生成的源附加到模块的 _cachedSource.source._source._value(我也尝试附加到模块的 ._source._value)
• 将 ._cachedSource.hash 设置为空字符串(因为这似乎是下一步工作所必需的)
• 我将模块传递给 .rebuildModule()

看起来rebuildModule应该重新解析源代码，重新建立依赖关系等等，但它没有解析我的require语句并将它们更改为webpack require。构建的文件包含我修改的源代码，但 require('...') 语句未修改。

如何使我修改的模块“更新”，以便 webpack 将我添加的源视为与原始解析的源相同？除了rebuildModule()之外我还需要做些什么吗？我在构建过程中做这项工作是否太晚了？或者我的处理方式是错误的？

Answer 1

我想出了如何以一种非常轻松的方式做到这一点。

我做错的事情:

• 可能上钩太晚了？最早可以完成此任务的插件是编译的“seal”插件。尽管有这个名称，但该插件 Hook 作为密封函数中的第一行执行，因此尚未发生密封。至此所有模块均已加载完毕。
• rebuildModule()不是一个好主意，因为这会从头开始重新加载模块:文件的源代码已加载并通过任何适用的加载器传递，并且 _source module的属性(property)当该过程完成时，对象最终会被重新分配。
  • 使用rebuildModule()此时，如果有一种方法可以修改在此调用中加载的模块源(即动态分配仅在本次重建中使用的加载器函数)，那就太好了。然后，我们就能够利用加载模块源代码时发生的 sourceMap 行为(见下文)

我是如何让它工作的:

• Hook compilation的“seal”插件，迭代编译的module s 并找到您想要的
• 修改模块的源代码，例如module._source._value += extraCode;

• 重新解析模块:

  module.parse.parse(module._source.source(), {
    current: module, 
    module.module,
    compilation: compilation,
    options: compilation.options
  });
  

解析取自NormalModule的build方法，在正常模块构建过程中加载源代码后或多或少会立即调用该方法。

此实现将修改和解析的源代码放入我的最终输出中。由于NormalModuleMixin的doBuild中有一些sourceMap的东西方法，并且由于我在调用这些函数后添加到源中，所以我认为 sourceMap 现在会变得困惑。因此，下一步是获取 sourceMap 以反射(reflect)代码添加。不确定是否尝试手动更新 sourceMap 或者研究上面的想法，尝试动态应用加载器并调用rebuildModule()而不是解析。

如果您知道执行上述任何操作的更好方法，请告诉我!