如何编写基于其他模块动态添加模块到包中的 Webpack 插件？

Question

我在为翻译服务编写 Webpack 插件时遇到问题。

目标是：

1. 在编译期间获取所有必需模块的名称（和源代码）。我需要能够扫描包含的源代码以了解特殊的 t() 函数用法，但我只想扫描那些将包含在包中的模块（根据构建配置，这些模块可以是所有项目模块的子集） .
2. 基于收集的模块，我想动态创建其他模块（带有翻译）并将它们添加到包中。这些模块需要能够导入自己的依赖项。

另一个要求是 Webpack 的代码拆分功能应该与动态创建的模块一起使用（我想将它们提取到单独的文件中——例如 bundle.[lang].js）。另外，这可能超出了这个问题的范围，我必须将这些带有翻译的块设为可选（因此您不必加载所有语言，而只需加载一种语言）。

更多详情请见https://github.com/ckeditor/ckeditor5/issues/387。

我一直在尝试多种解决方案，但 Webpack 2 的文档并不是很有帮助。我可以通过监听模块解析挂钩 (before-resolve) 来获取所有模块，但我不知道所有依赖项何时解决，我不知道之后是否可以添加更多模块（以及如何做到这一点– addEntry 可以吗？什么时候可以使用？）。

我也在考虑连接 Webpack 插件和 Webpack 加载器（因为我需要的功能与 Webpack's style-loader 非常相似），但是从插件级别我只能添加加载器的路径，而不是加载器本身，所以我不能将配置对象作为参数传递——我错了吗？

附言。我使用的是 Webpack 2。如果您觉得这些要求很奇怪，请参阅 https://github.com/ckeditor/ckeditor5/issues/387 :)。

Answer 1

这是一个非常复杂的问题，但我可以展示如何将其他依赖项添加到特定模块，就好像该模块需要这些依赖项一样。这可确保您添加的模块位于正确的块中，并且如果从包中删除父模块，也会将其删除。

const CommonJsRequireDependency = require("webpack/lib/dependencies/CommonJsRequireDependency")

class MyPlugin {
  apply(compiler) {
    compiler.plugin("compilation", compilation => {
      compilation.plugin("succeed-module", module => {
        // this will be called for every successfully built module, but before it's parsed and
        // its dependencies are built. The built source is available as module._source.source()
        // and you can add additional dependencies like so:
        module.dependencies.push(new CommonJsRequireDependency("my-dependency", null))
      }
    }
  }
}

这只是其中的一部分。您可能还需要编写自己的加载器来实际生成翻译（您可以将上面的 my-dependency 替换为 my-loader!path/to/module 以立即调用它）并在创建块之后的某个步骤可能将它们提取到新资产中并加载它们，因为它们实际上并不是任何地方的required。