小编hea*_*den的帖子

webpack插件中的流水线代码生成

问题:

我正在尝试编写一个webpack插件,将源代码生成器集成到我的webpack构建中.我的完整场景很复杂,因此我将其分解为更简单的问题进展.

第一部分:

我有一个代码生成器,%.js%.proto文件生成一个文件.例如,源文件foo.protobar.proto,我想我的插件产生以下编译步骤:

                ???????????
    foo.proto ??? codegen ???> foo.js
                ???????????
                ???????????
    bar.proto ??? codegen ???> bar.js
                ???????????
Run Code Online (Sandbox Code Playgroud)

我的意思是在每个%.proto文件上注册这个依赖项(用于文件监视)并%.js在编译对象上声明生成的assets()?

这种情况可以通过使用加载器来实现require('codegen!foo.proto'),但是通过第三部分,您将看到为什么加载器不合适.

我的意图将表达make为:

%.js: %.proto
    codegen $^ $@
Run Code Online (Sandbox Code Playgroud)

第二部分:

%.js我的生成器发出的生成文件现在采用ES6语法,因此需要转换为ES5.我已经babel-loader配置了ES6源的转换,如果这有用的话.继续这个例子,步骤将是:

                ???????????  ?????????
    foo.proto ??? codegen ???? babel ???> foo.js
                ???????????  ?????????
                ???????????  ?????????
    bar.proto ??? codegen ???? babel ???> bar.js
                ???????????  ?????????
Run Code Online (Sandbox Code Playgroud)

即,我想要:

%.js: %.proto
    codegen $^ | babel -o $@
Run Code Online (Sandbox Code Playgroud)

我是不是该:

  • 在我的插件任务中进行转换,将其隐藏在webpack编译中? …

plugins webpack

9
推荐指数
1
解决办法
416
查看次数

标签 统计

plugins ×1

webpack ×1