Bundle Size Reporter

Build a webpack configuration module that generates bundle analysis reports in different formats.

Requirements

Your task is to create a webpack configuration module that integrates bundle analysis capabilities. The module should:

1. Accept a configuration object with the following properties:

   • mode: A string that determines the output format ('server', 'static', or 'json')
   • outputPath: A string specifying where to save the report file (for 'static' and 'json' modes)
   • port: A number specifying the server port (for 'server' mode, defaults to 8888)
   • autoOpen: A boolean indicating whether to automatically open the browser (for 'server' mode, defaults to true)

2. Return a webpack plugins array that includes the properly configured bundle analyzer

3. Handle different modes correctly:

   • In 'server' mode, start an HTTP server with the visualization
   • In 'static' mode, generate a standalone HTML report file
   • In 'json' mode, export raw chart data as JSON

Implementation

@generates

API

/**
 * Creates a webpack plugin configuration for bundle analysis
 *
 * @param {Object} config - Configuration object
 * @param {string} config.mode - Analysis mode: 'server', 'static', or 'json'
 * @param {string} [config.outputPath] - Output file path for static/json modes
 * @param {number} [config.port=8888] - Server port for server mode
 * @param {boolean} [config.autoOpen=true] - Auto-open browser in server mode
 * @returns {Array} Array containing configured webpack plugins
 */
function createBundleReporter(config) {
  // Implementation here
}

module.exports = { createBundleReporter };

Test Cases

Server mode configuration

• Given config with mode 'server' and port 9000, returns plugins array with analyzer in server mode on port 9000 @test

Static mode configuration

• Given config with mode 'static' and outputPath 'reports/bundle.html', returns plugins array with analyzer in static mode writing to specified path @test

JSON mode configuration

• Given config with mode 'json' and outputPath 'reports/stats.json', returns plugins array with analyzer in json mode writing to specified path @test

Browser opening control

• Given config with mode 'server' and autoOpen false, returns plugins array with analyzer that won't auto-open browser @test

Dependencies { .dependencies }

webpack-bundle-analyzer { .dependency }

Provides bundle visualization and analysis capabilities for webpack builds.

@satisfied-by