Plugins Web包插件中的流水线代码生成 问题:

我正在尝试编写一个网页包插件，将源代码生成器集成到我的网页包构建中。我的整个场景很复杂，所以我将其分解为一系列更简单的问题

第一部分： 我有一个代码生成器，它从

%.proto

文件生成

%.js

文件。例如，对于源文件

foo.proto

和

bar.proto

，我希望我的插件生成以下编译步骤：

                ┌─────────┐
    foo.proto ──┤ codegen ├──> foo.js
                └─────────┘
                ┌─────────┐
    bar.proto ──┤ codegen ├──> bar.js
                └─────────┘

我应该在哪里注册每个

%.proto

文件上的依赖项（用于文件监视）并在编译对象上声明生成的资产（

%.js

）

这个场景可以通过使用

require（'codegen！foo.proto'）

使用加载器实现，但是在第三部分中，您将看到为什么加载器不合适

我的意图将在

make

中表达为：

%.js: %.proto
    codegen $^ $@

第二部分： 我的生成器生成的

%.js

文件现在采用ES6语法，因此需要传输到ES5。我已经为ES6源代码的传输配置了

babel loader

，如果有帮助的话。继续该示例，步骤如下：

                ┌─────────┐  ┌───────┐
    foo.proto ──┤ codegen ├──┤ babel ├──> foo.js
                └─────────┘  └───────┘
                ┌─────────┐  ┌───────┐
    bar.proto ──┤ codegen ├──┤ babel ├──> bar.js
                └─────────┘  └───────┘

i、 例如，我想要：

%.js: %.proto
    codegen $^ | babel -o $@

我应该：

• 在我的插件任务中进行透明化，将其隐藏在网页包编译中
• 是否通过在编译对象上创建其他任务来让webpack进行传输
• 是否以允许webpack通过其已用于其他源的适当加载程序管道转换生成的js的方式发送

第三部分： 我的生成器现在接受一个额外的输入文件

%.fragment.js

。我如何表达对webpack编译的这种依赖，以便在

%.proto

或

%.fragment.js

发生更改时，文件监视将重建资产？这种多源依赖性就是为什么我认为加载程序不是一个合适的方向

                  ┌─────────┐  ┌───────┐
      foo.proto ──┤ codegen ├──┤ babel ├──> foo.js
foo.fragment.js ──┤         │  │       │
                  └─────────┘  └───────┘
                  ┌─────────┐  ┌───────┐
      bar.proto ──┤ codegen ├──┤ babel ├──> bar.js
bar.fragment.js ──┤         │  │       │
                  └─────────┘  └───────┘

我的意图是：

%.js: %.proto %.fragment.js
    codegen $^ | babel -o $@

在这本书中，我看到有人提到“儿童汇编”。是否有任何关于它们是什么或打算如何使用的网页文档

---

或者，这种情况是否不是webpack想要支持的，即使是通过自定义插件？

您的问题可以通过加载程序解决。我建议你在上班前先看一下报纸

首先，优先权是

[loader]只执行一项任务。所以，您的proto文件加载程序将只生成ES6JS文件


问：我应该在哪里注册对每个%.proto文件的依赖关系（用于文件监视）并在编译对象上声明生成的资产（%.js）

答：您应该以通用方式要求您的proto文件（如您所述）：

以及生产具有以下功能的额外资产：

emitFile(name: string, content: Buffer|String, sourceMap: {...})


问：我是否应该以允许webpack通过其已用于其他源的适当加载程序管道转换生成的js

答：是的，您的加载程序只能执行一项任务：从proto文件生成ES6JS文件。然后，生成的文件将传递给babel：

{test: /\.proto$/, loader: 'babel-loader!proto-loader'}


问：我的生成器现在接受一个额外的输入文件%.fragment.js。我如何表达对Web包编译的这种依赖，以便在%.proto或%.fragment.js发生更改时，文件监视将重建资产

答：您必须使用
addDependency
功能（文档示例）：

{test: /\.proto$/, loader: 'babel-loader!proto-loader'}

// Loader adding a header
var path = require("path");
module.exports = function(source) {
    this.cacheable();
    var callback = this.async();
    var headerPath = path.resolve("header.js");
    this.addDependency(headerPath);
    fs.readFile(headerPath, "utf-8", function(err, header) {
        if(err) return callback(err);
        callback(null, header + "\n" + source);
    });
};