webpack 判断资产入口

Question

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

entry.one.js
 - asset a
 - asset b

entry.two.js
 - asset c
 - asset d

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

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

看来 Webpack 的 compilation.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));
      }
    }
  )

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

谢谢！

Answer 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 挂钩下，将它们合并并添加到构建中作为两个新资产的过程是微不足道的。

webpack 判断资产入口

Webpack determine asset entry

javascript

webpack

webpack-5