如何编写基于其他模块动态添加模块到包的 Webpack 插件? [英] How to write Webpack plugin which adds modules to the bundle on the fly based on other modules?

问题描述

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

I have a problem with writing a Webpack plugin for a translation service.

目标是:

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

1. Get names (and source code) of all required modules during compilation. I need to be able to scan the included source code for special t() function usage but I want to scan only those modules which will be included in the bundle (which, depending on build configuration, can be a subset of all project modules).
2. Based on the gathered modules, I want to create additional modules (with translations) on the fly and add them to the bundle. Those modules need to be able to import their own dependencies.

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

An additional requirement is that the Webpack's code splitting feature should work with the modules created on the fly (I want to extract them to separate files – e.g. bundle.[lang].js). Also, which may be out of the scope of this question, I must make those chunks with translations optional (so you don't have to load all languages, but just one).

更多详细信息可以在 https://github.com/ckeditor/ckeditor5/issues/387 中找到.

More details can be found in https://github.com/ckeditor/ckeditor5/issues/387.

我尝试了多种解决方案，但 Webpack 2 的文档并不是很有帮助.我可以通过侦听模块解析钩子(before-resolve)来获取所有模块，但是我不知道所有依赖项何时解析，也不知道之后是否可以添加更多模块那(以及如何做到这一点 - addEntry 是否可以以及何时可以使用它?).

I've been trying multiple solutions, but Webpack 2's documentation is not very helpful. I can get all the modules by listening to module resolution hooks (before-resolve), but I don't know when all the dependencies are resolved and I don't know if I can add more modules after that (and how to do that – is addEntry ok and when I can use it?).

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

I was also thinking on connecting Webpack plugin and Webpack loader (because the feature I need is pretty similar to Webpack's style-loader), but from the plugin level I can only add path to the loader, not the loader itself, so I can't pass the config object as a parameter – am I wrong?

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

PS. I use Webpack 2. If the requirements seem strange to you, please see https://github.com/ckeditor/ckeditor5/issues/387 :).

推荐答案

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

This is a really complex question, but I can show how you can add additional dependencies to specific modules as if those were required from that module. This ensures that your added modules will be in the correct chunks and will also be removed if the parent module is removed from the bundle.

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.

This is just one part of it. You'll also likely need to write your own loader to actually generate the translations (you can replace my-dependency above with my-loader!path/to/module to invoke it immediately) and some step after the chunks are created to perhaps extract them into a new asset and load them since they aren't actually required anywhere.

这篇关于如何编写基于其他模块动态添加模块到包的 Webpack 插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！