CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

Overall
score

98%

Overview
Eval results
Files

task.mdevals/scenario-10/

Webpack Bundle Analysis Wrapper

Build a Node.js module that provides a configurable wrapper around webpack bundle analysis with flexible logging control for different environments.

Requirements

Your module should provide a function that analyzes webpack bundles with configurable verbosity. The function should support different execution contexts (development, CI/CD, production) that require different amounts of console output.

Logging Configuration

Support four verbosity levels:

  • info: Show detailed information about the analysis process, including server URLs, file paths, and progress updates
  • warn: Show only warnings about potential issues and errors
  • error: Show only critical errors that prevent analysis
  • silent: Suppress all console output

The verbosity level should be configurable when calling the analysis function.

Analysis Modes

Support two analysis modes:

  1. Server mode: Start an interactive analysis server (useful in development)
  2. Static mode: Generate a standalone HTML report file (useful in CI/CD)

Core Functionality

The wrapper should:

  1. Accept a webpack stats file path and configuration options
  2. Use the analysis library with the specified verbosity level
  3. Support both server and static report modes
  4. Return information about where the report was generated (URL for server mode, file path for static mode)

Requirements

  • The function must properly configure the underlying analysis tool's log level
  • In server mode with info level, the server URL should be displayed
  • In server mode with silent level, no output should appear
  • In static mode with info level, the output file path should be displayed
  • The function should handle errors appropriately based on the log level

Implementation

@generates

API

/**
 * Analyzes a webpack stats file with configurable logging
 * @param {string} statsFilePath - Path to the webpack stats JSON file
 * @param {object} options - Configuration options
 * @param {string} options.mode - Analysis mode: 'server' or 'static'
 * @param {string} options.logLevel - Verbosity level: 'info', 'warn', 'error', or 'silent'
 * @param {string} [options.reportFilename] - Output filename for static reports (default: 'report.html')
 * @param {number} [options.port] - Port for server mode (default: 8888)
 * @returns {Promise<object>} Object containing report location info
 */
async function analyzeBundleWithLogging(statsFilePath, options) {
  // Implementation
}

module.exports = { analyzeBundleWithLogging };

Test Cases

  • Given a valid stats file in server mode with log level "info", the function starts a server and returns the URL, with the URL logged to console @test
  • Given a valid stats file in server mode with log level "silent", the function starts a server and returns the URL, but nothing is logged to console @test
  • Given a valid stats file in static mode with log level "info", the function generates an HTML report and returns the file path, with the path logged to console @test
  • Given a valid stats file in static mode with log level "warn", the function generates a report with minimal console output @test

Dependencies { .dependencies }

webpack-bundle-analyzer { .dependency }

Provides bundle analysis capabilities and logging utilities for webpack stats files.

@satisfied-by

Install with Tessl CLI

npx tessl i tessl/npm-webpack-bundle-analyzer

tile.json