or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcore-compilation.mddevelopment-tools.mdindex.mdmodule-system.mdoptimization.mdplugins.mdruntime-system.mdutilities.md
tile.json

tessl/npm-webpack

A comprehensive module bundler and build tool for JavaScript applications with advanced optimization and plugin system.

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

To install, run

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

index.mddocs/

Webpack

Webpack is a comprehensive module bundler and build tool for JavaScript applications that transforms, bundles, and optimizes various types of assets including JavaScript modules (ES6, CommonJS, AMD), stylesheets, images, and other resources into optimized bundles suitable for web browsers. It provides a powerful plugin system, loader architecture, code splitting, hot module replacement, and production optimization features.

Package Information

  • Package Name: webpack
  • Package Type: npm
  • Language: JavaScript with TypeScript support
  • Installation: npm install webpack

Core Imports

const webpack = require("webpack");

For ES modules:

import webpack from "webpack";

Individual components can be imported:

const { 
  Compiler, 
  Compilation, 
  DefinePlugin, 
  HotModuleReplacementPlugin 
} = require("webpack");

Basic Usage

const webpack = require("webpack");

// Configuration-based usage
const config = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },
  mode: "production"
};

// Callback-style compilation
webpack(config, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err || stats.toString());
    return;
  }
  console.log("Build successful!");
});

// Programmatic compiler usage
const compiler = webpack(config);
compiler.run((err, stats) => {
  if (err) console.error(err);
  console.log(stats.toString());
  
  compiler.close((closeErr) => {
    if (closeErr) console.error(closeErr);
  });
});

Architecture

Webpack is built around several key architectural components:

  • Compiler: Central orchestrator that manages the entire build process and provides a hooks-based plugin system
  • Compilation: Represents a single build process with modules, chunks, and assets
  • Module System: Handles different module types (JavaScript, CSS, assets) with dependency tracking
  • Plugin System: Extensible architecture allowing custom build logic through lifecycle hooks
  • Loader System: Transforms source files during import/require processing
  • Runtime: Generated code that handles module loading, chunk loading, and hot updates in the browser
  • Optimization: Built-in and pluggable optimizations including code splitting, tree shaking, and minification

Capabilities

Core Compilation System

Central webpack compilation functionality including the compiler, compilation process, and module management. Essential for all webpack operations.

/**
 * Main webpack compilation function
 * @param options - Webpack configuration object or array of configurations
 * @param callback - Optional callback for handling compilation results
 * @returns Compiler or MultiCompiler instance
 */
function webpack(
  options: Configuration | MultiConfiguration, 
  callback?: (err: Error | null, stats?: Stats | MultiStats) => void
): Compiler | MultiCompiler | null;

interface Configuration {
  entry?: string | string[] | Entry;
  output?: Output;
  mode?: "development" | "production" | "none";
  module?: ModuleOptions;
  plugins?: WebpackPluginInstance[];
  resolve?: ResolveOptions;
  optimization?: OptimizationOptions;
  devtool?: string | false;
  target?: string | string[];
  externals?: Externals;
  // ... additional configuration options
}

class Compiler {
  run(callback: (err: Error | null, stats?: Stats) => void): void;
  watch(watchOptions: WatchOptions, handler: (err: Error | null, stats?: Stats) => void): Watching;
  close(callback: (err?: Error) => void): void;
  // ... additional compiler methods
}

Core Compilation System

Plugin System

Comprehensive built-in plugin ecosystem for optimization, development tools, platform support, and custom functionality. Over 60 built-in plugins covering all aspects of the build process.

// Core functionality plugins
class DefinePlugin {
  constructor(definitions: Record<string, any>);
}

class HotModuleReplacementPlugin {
  constructor(options?: HMROptions);
}

class ProgressPlugin {
  constructor(options?: ProgressPluginOptions);
}

// Optimization plugins
class optimize.SplitChunksPlugin {
  constructor(options?: SplitChunksOptions);
}

class optimize.ModuleConcatenationPlugin {
  constructor();
}

Plugin System

Configuration API

Configuration processing, validation, and default value application. Handles complex configuration normalization and validation.

/**
 * Validates webpack configuration against schema
 * @param options - Configuration to validate
 */
function validate(options: Configuration | MultiConfiguration): void;

/**
 * Normalizes webpack configuration
 * @param options - Raw configuration options
 * @returns Normalized configuration
 */
function config.getNormalizedWebpackOptions(options: Configuration): WebpackOptionsNormalized;

/**
 * Applies default configuration values
 * @param options - Normalized configuration
 * @returns Configuration with defaults applied
 */
function config.applyWebpackOptionsDefaults(options: WebpackOptionsNormalized): WebpackOptionsNormalized;

Configuration API

Module System

Module processing, dependency resolution, and module graph management. Handles JavaScript, CSS, assets, and WebAssembly modules with full dependency tracking.

class Module {
  // Base module class with common functionality
  type: string;
  context: string | null;
  dependencies: Dependency[];
  buildInfo: Record<string, any>;
}

class NormalModule extends Module {
  // Standard file-based modules processed through loaders
  request: string;
  resource: string;
  loaders: any[];
}

class ModuleGraph {
  // Manages module dependency relationships
  getModule(dependency: Dependency): Module | null;
  getConnection(dependency: Dependency): ModuleGraphConnection | null;
  setResolvedModule(originModule: Module, dependency: Dependency, module: Module): void;
}

Module System

Optimization System

Built-in optimization features including code splitting, tree shaking, chunk optimization, and production-ready asset generation.

interface OptimizationOptions {
  minimize?: boolean;
  minimizer?: WebpackPluginInstance[];
  splitChunks?: SplitChunksOptions;
  runtimeChunk?: RuntimeChunkOptions;
  sideEffects?: boolean;
  usedExports?: boolean;
  // ... additional optimization options
}

class optimize.SplitChunksPlugin {
  constructor(options?: SplitChunksOptions);
}

class optimize.RuntimeChunkPlugin {
  constructor(options?: RuntimeChunkOptions);
}

Optimization System

Development Tools

Development-focused features including source maps, hot module replacement, progress reporting, and development server integration.

class HotModuleReplacementPlugin {
  constructor(options?: HMROptions);
}

class SourceMapDevToolPlugin {
  constructor(options?: SourceMapDevToolPluginOptions);
}

class ProgressPlugin {
  constructor(options?: ProgressPluginOptions);
}

interface WatchOptions {
  aggregateTimeout?: number;
  poll?: boolean | number;
  ignored?: string | RegExp | string[];
}

Development Tools

Runtime System

Webpack runtime code generation, chunk loading mechanisms, and module resolution at runtime. Includes support for different environments and loading strategies.

const RuntimeGlobals: {
  require: "__webpack_require__";
  requireScope: "__webpack_require__.*";
  exports: "__webpack_exports__";
  module: "module";
  // ... additional runtime globals
};

class RuntimeModule {
  // Base class for runtime code modules
  name: string;
  stage: number;
  generate(): string;
}

Runtime System

Utility Functions

Helper functions and utilities for hashing, serialization, path manipulation, and other common webpack operations.

const util: {
  createHash(algorithm?: string): Hash;
  comparators: ComparisonHelpers;
  cleverMerge<T, U>(first: T, second: U): T & U;
  LazySet: typeof LazySet;
  // ... additional utilities
};

class Stats {
  // Compilation statistics and information
  hasErrors(): boolean;
  hasWarnings(): boolean;
  toString(options?: StatsOptions): string;
  toJson(options?: StatsOptions): StatsCompilation;
}

Utility Functions

Validation and Versioning

Core webpack validation functions and version information.

/**
 * Validates webpack configuration against JSON schema
 * @param schema - JSON schema to validate against
 * @param options - Configuration object to validate
 * @param options - Additional validation options
 */
function validateSchema(
  schema: JSONSchema4 | JSONSchema6 | JSONSchema7,
  options: any,
  options?: ValidationErrorConfiguration
): void;

/**
 * Current webpack version string
 */
const version: string;

Core Classes and Utilities

Essential webpack classes and utilities for advanced usage and plugin development.

// Core infrastructure classes
class WebpackError extends Error {
  name: string;
  message: string;
  details?: string;
  origin?: string;
  dependencies?: Dependency[];
}

class Dependency {
  type: string;
  category: string;
  loc?: SourceLocation;
}

class Cache {
  // Webpack's caching infrastructure
  get<T>(identifier: string, etag: string | null, callback: (err?: Error, result?: T) => void): void;
  store<T>(identifier: string, etag: string | null, data: T, callback: (err?: Error) => void): void;
}

class Chunk {
  // Represents a chunk in the webpack dependency graph
  id: string | number | null;
  name?: string;
  files: Set<string>;
  auxiliary: Set<string>;
}

class ChunkGraph {
  // Manages chunk-module relationships
  getChunkModules(chunk: Chunk): Module[];
  getModuleChunks(module: Module): Chunk[];
}

class Template {
  // Base template functionality for code generation
  static indent(str: string | string[]): string;
  static prefix(str: string | string[], prefix: string): string;
  static asString(str: string | string[]): string;
}

// Validation utilities
class ValidationError extends Error {
  constructor(errors: ValidationErrorInstance[], schema: object, configuration: object);
  errors: ValidationErrorInstance[];
  schema: object;
  configuration: object;
}

Common Types

type Entry = string | string[] | EntryObject;

interface EntryObject {
  [name: string]: string | string[] | EntryDescription;
}

interface Output {
  filename?: string | ((pathData: PathData) => string);
  path?: string;
  publicPath?: string | ((pathData: PathData) => string);
  library?: LibraryOptions;
  // ... additional output options
}

interface WebpackPluginInstance {
  apply(compiler: Compiler): void;
}

type WebpackPluginFunction = (compiler: Compiler) => void;

interface Stats {
  hasErrors(): boolean;
  hasWarnings(): boolean;
  toString(options?: StatsOptions): string;
  toJson(options?: StatsOptions): StatsCompilation;
}

interface MultiStats {
  hasErrors(): boolean;
  hasWarnings(): boolean;
  toString(options?: MultiStatsOptions): string;
  toJson(options?: MultiStatsOptions): { children: StatsCompilation[] };
}

Error Handling

Webpack provides comprehensive error handling through stats objects and callback error parameters:

webpack(config, (err, stats) => {
  // Handle compilation errors
  if (err) {
    console.error("Fatal webpack error:", err);
    return;
  }
  
  // Handle build errors/warnings
  if (stats.hasErrors()) {
    console.error("Build errors:", stats.toString({ errors: true }));
  }
  
  if (stats.hasWarnings()) {
    console.warn("Build warnings:", stats.toString({ warnings: true }));
  }
});