2

我正在将我的个人插件升级到 Webpack5，虽然事情进展顺利；我一直在努力思考如何正确更改资产中期构建的来源。

我知道 Webpack5 对资产挂钩的更改，并且需要在 processAssets 挂钩/适当的阶段进行更改。

compilation.hooks.processAssets.tap(
  {
    name: 'BobRoss',
    stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
    additionalAssets: true          
  },
  (assets) => {
    // ... logic here ...
  }
);

然而，我不明白的是实际资产的源道具、函数或缓存字符串？

例如，要更改未缩小的 JS 资产的来源，我只能通过以下方式获得成功：

assets[i] = {
  source: () => 'the change';
};

但是，如果该资产被缩小，我只能通过以下方式获得成功：

assets[i]._chachedSource = 'the change';

这有点奇怪，但我想我们可以解决这个问题..

但随后进入 HTML 资产，无论是否缩小，只有在以下情况下才有效：

assets[i]._value = 'the change';

所以，我越来越觉得我错过了一些明显的 API 方法，用于一致地更改资产的来源，并且我正在添加故障点而不是解决方案。谁能指出我正确的方向或给我一个更好的方法的想法？

谢谢！

4

1 回答 1

4

compilation.getAsset()正如怀疑的那样，我确实在这里缺少compilation.updateAsset()方法和 webpack 的{ sources }类 API，以使我的生活更轻松。

首先，您需要{ sources }从 webpack 引入类，这将帮助我们对资产进行原始源更改（无论其优化或资产类型如何）：

const { sources } = require('webpack');

然后，当循环资产时（由 processAsset 的回调提供），我们可以使用编译对象的方法compilation.getAsset()和compilation.updateAsset()方法来使用标准化的方法来获取、更新和保存资产源代码：

compilation.hooks.processAssets.tap(
  {
    name: 'BobRoss',
    stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
    additionalAssets: true          
  },
  (assets) => {
    for (let i in assets) {
      const asset = compilation.getAsset(i);  // <- standardized version of asset object
      const contents = asset.source.source(); // <- standardized way of getting asset source

      // standardized way of updating asset source
      compilation.updateAsset(                
        i,
        new sources.RawSource(contents + 'new stuff')
      );                                     
    }
  }
);

希望这对其他人有帮助！

于 2021-01-02T01:38:34.270 回答