如何编写Webpack的插件,基于其他模块在飞行中添加模块?

编写翻译服务的Webpack插件时遇到问题。

目标是:

  1. 在编译期间获取所有必需模块的名称(和源代码)。 我需要能够扫描包含的源代码的特殊t()函数的使用情况,但我只想扫描将被包含在该包(这取决于构buildconfiguration,可以是所有项目模块的子集) 。
  2. 根据收集到的模块,我想创build更多的模块(带有翻译),并将其添加到包中。 这些模块需要能够导入自己的依赖关系。

另外一个要求就是Webpack的代码分割function应该可以和dynamic创build的模块一起工作(我想把它们提取到不同的文件 – 例如bundle.[lang].js )。 此外,这可能超出了这个问题的范围,我必须使这些块翻译可选(所以你不必加载所有的语言,但只有一个)。

更多细节可以在https://github.com/ckeditor/ckeditor5/issues/387find。

我一直在尝试多种解决scheme,但Webpack 2的文档不是很有帮助。 我可以通过侦听模块parsing钩子( before-resolve )来获取所有的模块,但是我不知道所有的依赖关系何时parsing,我不知道在这之后是否可以添加更多的模块(以及如何做到这一点- addEntry确定,当我可以使用它?)。

我也在考虑连接Webpack插件和Webpack加载器(因为我需要的特性与Webpack的样式加载器非常相似),但是从插件级别来说,我只能添加加载器的path,而不是加载器本身,所以我可以“ t传递configuration对象作为参数 – 我错了吗?

PS。 我使用Webpack 2.如果需求看起来很奇怪,请参阅https://github.com/ckeditor/ckeditor5/issues/387 :)。

这是一个非常复杂的问题,但我可以展示如何添加额外的依赖关系到特定的模块,就好像那些模块需要这些依赖关系一样。 这可以确保您添加的模块将处于正确的块中,并且如果从模块中删除父模块,也将被删除。

 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)) } } } } 

这只是其中的一部分。 你也可能需要编写你自己的loader来实际生成翻译(你可以用my-loader!path/to/module来replace上面的my-dependency来立即调用它),创build块之后的一些步骤可能会提取他们成为一个新的资产,并加载它们,因为他们实际上并不require任何地方。