or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-interface.mdindex.mdplugin-system.mdprogrammatic-api.md
tile.json

tessl/npm-webpack-cli

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/webpack-cli@6.0.x

To install, run

npx @tessl/cli install tessl/npm-webpack-cli@6.0.0

index.mddocs/

Webpack CLI

Webpack CLI is the official command-line interface for webpack, providing comprehensive tooling for configuration, building, serving, and analyzing webpack projects. It offers both CLI commands and a programmatic API for custom webpack integrations.

Package Information

  • Package Name: webpack-cli
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install webpack-cli
  • Node.js Support: >=18.12.0

Core Imports

import CLI from "webpack-cli";
import { type IWebpackCLI } from "webpack-cli";

For CommonJS:

const CLI = require("webpack-cli");

Basic Usage

CLI Usage

# Build with default configuration
npx webpack-cli

# Build with custom config
npx webpack-cli --config webpack.prod.js

# Watch mode
npx webpack-cli --watch

# Development server
npx webpack-cli serve

# Get system info
npx webpack-cli info

Programmatic Usage

import CLI from "webpack-cli";

// Initialize CLI instance
const cli = CLI;

// Run CLI programmatically
await cli.run(["--mode", "production", "--entry", "./src/index.js"]);

Architecture

Webpack CLI is built around several key components:

  • CLI Commands: Built-in commands (build, serve, info, configtest) with extensive option parsing
  • WebpackCLI Class: Core programmatic API implementing the IWebpackCLI interface
  • Plugin System: CLIPlugin for webpack integration and progress reporting
  • Configuration Management: Automatic config loading, validation, and merging
  • Package Integration: Support for webpack-dev-server, bundle analyzer, and package managers

Capabilities

CLI Interface

Command-line interface with built-in commands and extensive webpack configuration options. Supports build, serve, info, and configuration testing commands.

# Core commands
webpack-cli [options]                    # Build (default command)
webpack-cli serve [options]              # Development server
webpack-cli info [options]               # System information
webpack-cli configtest [config-path]     # Test configuration
webpack-cli help [command]               # Help information

CLI Interface

Programmatic API

WebpackCLI class providing complete programmatic access to CLI functionality. Includes configuration loading, compilation, and webpack integration.

interface IWebpackCLI {
  // Properties
  colors: WebpackCLIColors;
  logger: WebpackCLILogger;
  isColorSupportChanged: boolean | undefined;
  webpack: typeof webpack;
  builtInOptionsCache: WebpackCLIBuiltInOption[] | undefined;
  program: WebpackCLICommand;

  // Core execution
  run(args: string[], parseOptions?: ParseOptions): Promise<void>;
  runWebpack(options: WebpackRunOptions, isWatchCommand: boolean): Promise<void>;
  
  // Configuration management
  loadConfig(options: Partial<WebpackDevServerOptions>): Promise<WebpackCLIConfig>;
  buildConfig(config: WebpackCLIConfig, options: WebpackDevServerOptions): Promise<WebpackCLIConfig>;
  
  // Webpack integration
  loadWebpack(handleError?: boolean): Promise<typeof webpack>;
  createCompiler(
    options: Partial<WebpackDevServerOptions>, 
    callback?: Callback<[Error | undefined, Stats | MultiStats | undefined]>
  ): Promise<WebpackCompiler>;

  // Package management
  checkPackageExists(packageName: string): boolean;
  getAvailablePackageManagers(): PackageManager[];
  getDefaultPackageManager(): PackageManager | undefined;
  doInstall(packageName: string, options?: PackageInstallOptions): Promise<string>;

  // File and module operations
  loadJSONFile<T = unknown>(path: string, handleError: boolean): T;
  tryRequireThenImport<T = unknown>(
    module: string, 
    handleError: boolean,
    moduleType?: "unknown" | "commonjs" | "esm"
  ): Promise<T>;

  // Command and option management
  makeCommand(
    commandOptions: WebpackCLIOptions,
    options: WebpackCLICommandOptions,
    action: CommandAction
  ): Promise<WebpackCLICommand | undefined>;
  makeOption(command: WebpackCLICommand, option: WebpackCLIBuiltInOption): void;
  getBuiltInOptions(): WebpackCLIBuiltInOption[];

  // Info command integration
  getInfoOptions(): WebpackCLIBuiltInOption[];
  getInfoOutput(options: { output: string; additionalPackage: string[] }): Promise<string>;

  // Utility methods
  isMultipleCompiler(compiler: WebpackCompiler): compiler is MultiCompiler;
  isPromise<T>(value: Promise<T>): value is Promise<T>;
  isFunction(value: unknown): value is CallableFunction;
  isValidationError(error: Error): error is WebpackError;
  toKebabCase(str: string): string;
  capitalizeFirstLetter(str: string): string;
  getLogger(): WebpackCLILogger;
  createColors(useColors?: boolean): WebpackCLIColors;
  needWatchStdin(compiler: Compiler | MultiCompiler): boolean;
}

Programmatic API

Plugin System

CLIPlugin for webpack integration providing progress reporting, bundle analysis, and CLI-specific webpack functionality.

class CLIPlugin {
  constructor(options: CLIPluginOptions);
  apply(compiler: Compiler): void;
}

interface CLIPluginOptions {
  helpfulOutput: boolean;
  progress?: boolean | "profile";
  analyze?: boolean;
  hot?: boolean | "only";
  prefetch?: string;
  isMultiCompiler?: boolean;
  configPath?: string[];
}

Plugin System

Types

interface WebpackCLIConfig {
  options: WebpackConfiguration | WebpackConfiguration[];
  path: WeakMap<object, string[]>;
}

interface WebpackCLILogger {
  error: LogHandler;
  warn: LogHandler;
  info: LogHandler;
  success: LogHandler;
  log: LogHandler;
  raw: LogHandler;
}

interface WebpackCLIColors extends Colorette {
  isColorSupported: boolean;
}

interface WebpackCLICommand extends Command {
  pkg: string | undefined;
  forHelp: boolean | undefined;
  _args: WebpackCLICommandOption[];
}

interface WebpackCLICommandOption extends CommanderOption {
  helpLevel?: "minimum" | "verbose";
}

interface WebpackCLIBuiltInOption extends WebpackCLIBuiltInFlag {
  hidden?: boolean;
  group?: "core";
}

interface PackageInstallOptions {
  preMessage?: () => void;
}

type PackageManager = "pnpm" | "yarn" | "npm";
type WebpackCompiler = Compiler | MultiCompiler;
type LogHandler = (value: any) => void;
type StringFormatter = (value: string) => string;
type CommandAction = (...args: any[]) => Promise<void> | void;
type BasicPrimitive = string | boolean | number;