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 } class API 这里让我的生活更轻松。

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

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

希望这对其他人有帮助！

Webpack processAssets 钩子和资产源

Webpack processAssets hook and asset source

javascript

webpack

webpack-5