How to get a list of all files (or modules) included per chunk in Webpack

In Webpack, retrieving the list of all files or modules included in each chunk can be achieved through several methods:

1. Using stats Data

Webpack's stats is an object containing detailed information about the build process. You can export this information by setting the stats option in your Webpack configuration or using the CLI command webpack --json > stats.json. By analyzing the stats.json file, you can obtain detailed information about each chunk and the modules it contains.

Example Configuration:

javascript
module.exports = {
  // Other configurations...
  stats: {
    chunks: true,
    chunkModules: true,
    reasons: true,
    chunkOrigins: true
  }
};

After exporting, you can use tools such as webpack-bundle-analyzer or manually parse stats.json to view the contents of each chunk.

2. Using Plugins

Webpack provides a powerful plugin system, where certain plugins can help you retrieve detailed information about each chunk. For example, BundleAnalyzerPlugin not only helps you visualize the size of output files but also displays each module included in each chunk.

Example Configuration:

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

module.exports = {
  // Other configurations...
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

3. Writing Custom Plugins

If existing tools do not meet your needs, you can write custom Webpack plugins to access internal data. Webpack's compilation object provides rich hooks to insert custom logic.

Example Custom Plugin:

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 = {
  // Other configurations...
  plugins: [
    new ListChunksPlugin()
  ]
};

4. Using Webpack Hook API

At different stages of Webpack's lifecycle, you can use the hook API to capture information about chunks and modules. This is typically used for more complex custom logic and integration requirements.

Summary

Depending on your specific needs, you can choose to use Webpack's statistics, third-party analysis tools, or custom plugins to retrieve the list of files or modules included in each chunk. This can help optimize your bundling results, understand dependencies, or troubleshoot issues.