Webpack processAssets 挂钩和资源源

Question

我正在将我的个人插件升级到 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 方法，并且我添加的是故障点而不是解决方案。谁能指出我正确的方向或给我更好的方法的想法？

谢谢你！

Answer 1

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

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

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

希望这对其他人有帮助！