Bundle Visualization Setup

You are working on a webpack-based web application that has grown significantly in size. Your team needs to understand what's inside the production bundles to identify opportunities for optimization. Your task is to set up bundle size visualization that generates an interactive HTML report.

Requirements

Bundle Analysis Configuration

Configure your webpack build to automatically analyze bundle composition after each production build. The analysis should:

• Generate a standalone HTML report file that can be viewed without running a server
• Save the report to a file named bundle-report.html in the project root directory
• Only run during production builds (when NODE_ENV=production)
• Display the report automatically showing parsed sizes by default

Test Cases

• Running npm run build with NODE_ENV=production generates a bundle-report.html file in the project root @test
• The generated bundle-report.html file is a valid HTML file containing visualization data @test
• Running npm run build with NODE_ENV=development does NOT generate the bundle report @test

Implementation

@generates

Configuration

Your webpack configuration should export a function that receives environment variables and returns the appropriate webpack configuration object.

module.exports = (env) => {
  // Return webpack configuration object
  return {
    // webpack configuration
  };
};

Dependencies { .dependencies }

webpack { .dependency }

Provides module bundling capabilities.

webpack-bundle-analyzer { .dependency }

Provides bundle size visualization and analysis.