1

开发一个插件来获取特定的资产类型并将它们合并到一个文件中。我希望能够根据哪个条目将资产整合到文件中。

entry.one.js
 - asset a
 - asset b

entry.two.js
 - asset c
 - asset d

期望的结果是一个文件具有 a/b 资产，另一个文件具有 c/d 资产。

有没有办法确定资产来自哪个条目？

似乎 Webpackcompilation.processAssets并compliation.getAsset()没有真正为您提供关于哪些条目带来了哪些资产的上下文。

  compilation.hooks.processAssets.tap(
    {
      name: 'BobRoss',
      stage: compilation.PROCESS_ASSETS_STAGE_ANALYSE,
      additionalAssets: true
    },
    (assets) => {
      for (let i in assets) {
        console.log(assets[i]);
        console.log(compilation.getAsset(i));
      }
    }
  )

我需要从另一个挂钩位置查看资产吗？也许从块或模块来确定这一点？任何方向都会有所帮助。

谢谢！

4

1 回答 1

1

找到了。 compilation.chunkAsset.tap()是有问题的钩子，您既可以收集块的资产，也可以确定该块是否来自一个条目或另一个：

const entries = compiler.options.entry;

// Hook into compilation
compiler.hooks.compilation.tap({ name: 'BobRoss' }, (compilation) => {

  // Hook into chunkAsset
  compilation.hooks.chunkAsset.tap('BobRoss', (chunk, filename) => {

    // Only process chunks that are entry files
    if (entries[path.basename(filename)]) {  

      // get chunk's asset paths.
      const paths = [...chunk.auxiliaryFiles]; 

      // resolve paths into asset objects using compilation.getAsset()
      entries[path.basename(filename)].assets = Object.keys(paths).map((n) => compilation.getAsset(assets[n]));

    }
  });

});

将导致entries对象现在看起来像：

[{
  entry.one: {
    import: ['path/to/entry/file/entry.one.js'],
    assets: [asset, asset]
  }
},{
  entry.two: {
    import: ['path/to/entry/file/entry.one.js'],
    assets: [asset, asset]
  }
}]

compilation.processAssets从这里开始，在Webpack 挂钩下，将这些作为两个新资产整合并添加到构建中的过程是微不足道的。

于 2021-01-02T21:34:27.173 回答