tessl/npm-webpack-cli

CLI for webpack and friends - provides comprehensive command-line interface for webpack with configuration, building, serving, and analysis capabilities.

—

Pending

Overview

Eval results

Files

Plugin System

Name: tessl/npm-webpack-cli
Author: tessl

The webpack CLI plugin system provides integration between CLI functionality and webpack's plugin architecture, offering progress reporting, bundle analysis, and CLI-specific webpack enhancements.

Capabilities

CLIPlugin Class

Main plugin class that integrates CLI functionality with webpack compilation.

/**
 * CLI Plugin for webpack integration
 * Provides progress reporting, bundle analysis, and helpful output
 */
class CLIPlugin {
  /**
   * Create CLIPlugin instance
   * @param options - Plugin configuration options
   */
  constructor(options: CLIPluginOptions);

  /**
   * Apply plugin to webpack compiler
   * @param compiler - Webpack compiler instance
   */
  apply(compiler: Compiler): void;
}

Usage Examples:

import { CLIPlugin } from "webpack-cli";

// Basic usage
const plugin = new CLIPlugin({
  helpfulOutput: true,
  progress: true
});

// Add to webpack config
const config = {
  plugins: [plugin]
};

// Advanced configuration
const advancedPlugin = new CLIPlugin({
  helpfulOutput: true,
  progress: "profile",
  analyze: true,
  hot: true,
  isMultiCompiler: false,
  configPath: ["webpack.config.js"]
});

Progress Reporting

Built-in progress reporting for webpack compilation.

/**
 * Setup progress plugin for compilation tracking
 * @param compiler - Webpack compiler instance
 */
setupProgressPlugin(compiler: Compiler): void;

The progress plugin provides:

Compilation progress percentage
Current compilation phase
Module processing status
Build timing information

Configuration:

// Enable basic progress
new CLIPlugin({ progress: true });

// Enable detailed profiling
new CLIPlugin({ progress: "profile" });

Bundle Analysis

Integration with webpack-bundle-analyzer for bundle inspection.

/**
 * Setup bundle analyzer plugin
 * @param compiler - Webpack compiler instance
 * @returns Promise that resolves when analyzer is configured
 */
setupBundleAnalyzerPlugin(compiler: Compiler): Promise<void>;

Usage:

// Enable bundle analysis
new CLIPlugin({ analyze: true });

This will:

Launch bundle analyzer after compilation
Generate interactive bundle visualization
Show chunk sizes and dependencies
Help identify optimization opportunities

Helpful Output

Enhanced compilation output and logging.

/**
 * Setup helpful compilation output
 * @param compiler - Webpack compiler instance
 */
setupHelpfulOutput(compiler: Compiler): void;

Provides:

Formatted compilation statistics
Error and warning highlighting
Asset size information
Compilation time reporting
File change notifications in watch mode

Plugin Configuration

Complete configuration interface for CLIPlugin.

interface CLIPluginOptions {
  /**
   * Enable helpful compilation output and logging
   */
  helpfulOutput: boolean;

  /**
   * Enable progress reporting during compilation
   * - true: Basic progress bar
   * - "profile": Detailed profiling information
   * - false/undefined: No progress reporting
   */
  progress?: boolean | "profile";

  /**
   * Enable bundle analysis after compilation
   * Requires webpack-bundle-analyzer package
   */
  analyze?: boolean;

  /**
   * Hot module replacement configuration
   * - true: Enable HMR
   * - "only": HMR without page refresh fallback
   * - false/undefined: Disable HMR
   */
  hot?: boolean | "only";

  /**
   * Prefetch configuration for resource hints
   */
  prefetch?: string;

  /**
   * Indicate if this is a multi-compiler setup
   */
  isMultiCompiler?: boolean;

  /**
   * Paths to configuration files
   */
  configPath?: string[];
}

Plugin Integration Examples

Examples of using CLIPlugin in different scenarios.

Basic Development Setup:

import { CLIPlugin } from "webpack-cli";

const config = {
  mode: "development",
  plugins: [
    new CLIPlugin({
      helpfulOutput: true,
      progress: true,
      hot: true
    })
  ]
};

Production Build with Analysis:

const productionConfig = {
  mode: "production",
  plugins: [
    new CLIPlugin({
      helpfulOutput: true,
      progress: "profile",
      analyze: true
    })
  ]
};

Multi-Compiler Configuration:

const multiConfig = [
  {
    name: "client",
    plugins: [
      new CLIPlugin({
        helpfulOutput: true,
        progress: true,
        isMultiCompiler: true,
        configPath: ["webpack.client.js"]
      })
    ]
  },
  {
    name: "server", 
    plugins: [
      new CLIPlugin({
        helpfulOutput: true,
        progress: true,
        isMultiCompiler: true,
        configPath: ["webpack.server.js"]
      })
    ]
  }
];

Advanced Integration

Custom plugin integration with webpack CLI.

// Creating custom CLI-aware plugins
class CustomCLIPlugin {
  constructor(private cliPlugin: CLIPlugin) {}

  apply(compiler: Compiler) {
    // Access CLI functionality
    this.cliPlugin.apply(compiler);
    
    // Add custom hooks
    compiler.hooks.done.tap("CustomCLIPlugin", (stats) => {
      // Custom post-compilation logic
    });
  }
}

// Usage
const cliPlugin = new CLIPlugin({ helpfulOutput: true });
const customPlugin = new CustomCLIPlugin(cliPlugin);

const config = {
  plugins: [customPlugin]
};

Plugin Dependencies

Optional peer dependencies that enhance plugin functionality:

// Optional dependencies for enhanced features
interface OptionalDependencies {
  "webpack-bundle-analyzer"?: "^4.0.0";  // For analyze option
  "webpack-dev-server"?: "^4.0.0";       // For serve command integration
}

When these packages are installed, additional functionality becomes available: