如何编写 Webpack 插件,根据其他模块动态地将模块添加到捆绑包中?

2024-03-11

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

目标是:

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

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

更多详细信息可以参见https://github.com/ckeditor/ckeditor5/issues/387 https://github.com/ckeditor/ckeditor5/issues/387.

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

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

附言。我使用 Webpack 2。如果您觉得这些要求很奇怪,请参阅https://github.com/ckeditor/ckeditor5/issues/387 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))
      }
    }
  }
}

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何编写 Webpack 插件,根据其他模块动态地将模块添加到捆绑包中? 的相关文章

随机推荐