如何获取 Webpack 中每个 chunk 所包含的所有模块列表？

在Webpack中，要获取每个块（chunk）包含的所有文件或模块的列表，可以通过以下几种方式实现：

1. 使用 stats 数据

Webpack的stats是一个包含有关构建过程详细信息的对象。你可以通过在Webpack配置中设置stats选项或使用CLI命令webpack --json > stats.json导出这些信息。通过分析这个stats.json文件，你可以得到关于每个块和它们包含的模块的详细信息。

示例配置：

javascript
module.exports = {
  // 其他配置...
  stats: {
    chunks: true,
    chunkModules: true,
    reasons: true,
    chunkOrigins: true
  }
};

导出后，你可以使用工具如webpack-bundle-analyzer或简单地手动解析stats.json来查看每个块的内容。

2. 使用插件

Webpack提供了强大的插件系统，其中一些插件可以帮助你获取每个块的详细信息。例如，BundleAnalyzerPlugin不仅可以帮助你可视化输出文件的大小，还能显示每个块包含的每个模块。

示例配置：

javascript
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // 其他配置...
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

3. 编写自定义插件

如果现有工具不满足需求，你可以编写自定义Webpack插件来访问内部数据。Webpack的编译对象提供了丰富的钩子来插入自定义逻辑。

示例自定义插件：

javascript
class ListChunksPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('ListChunksPlugin', (compilation) => {
      compilation.chunks.forEach(chunk => {
        console.log(`Chunk ${chunk.name}:`);
        chunk.getModules().forEach(module => {
          console.log(` - ${module.identifier()}`);
        });
      });
    });
  }
}

module.exports = {
  // 其他配置...
  plugins: [
    new ListChunksPlugin()
  ]
};

4. 使用 Webpack 钩子 API

在Webpack的生命周期的不同阶段，你可以使用钩子API来捕获关于块和模块的信息。这通常用于更复杂的自定义逻辑和集成需求。

总结

根据你的具体需求，你可以选择使用Webpack的统计信息、第三方分析工具、或是编写自定义插件的方式来获取每个块包含的文件列表。这可以帮助优化你的打包结果，了解依赖关系，或进行故障排除。