CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-webpack-cli

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

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/webpack-cli@6.0.x
Publish Source
CLI
Badge
tessl/npm-webpack-cli badge