CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-webpack

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

Pending
Overview
Eval results
Files

module-system.mddocs/

Module System

Webpack's module system is the foundation for dependency management, code organization, and build optimization. It provides a comprehensive architecture for representing modules, tracking dependencies, organizing chunks, and managing the relationships between all components in a webpack build.

Capabilities

Base Module Class

The abstract base class that defines the interface for all webpack modules.

class Module {
  /** Module type identifier */
  type: string;
  
  /** Module context (directory path) */
  context: string;
  
  /** Module layer (for advanced module organization) */
  layer: string | null;
  
  /** Module needs identifier flag */
  needId: boolean;
  
  /** Debug identifier for the module */
  debugId: number;
  
  /** Hash for module content */
  hash: string | null;
  
  /** Rendered hash for optimization */
  renderedHash: string | null;
  
  /** Build information and metadata */
  buildInfo: Record<string, any>;
  
  /** Build metadata */
  buildMeta: Record<string, any>;
  
  /** Factory metadata */
  factoryMeta: Record<string, any>;
  
  /**
   * Get unique identifier for the module
   * @param context - Module context information
   * @returns Unique string identifier
   */
  identifier(): string;
  
  /**
   * Get readable identifier for debugging
   * @param requestShortener - Function to shorten request strings
   * @returns Human-readable identifier
   */
  readableIdentifier(requestShortener: RequestShortener): string;
  
  /**
   * Build the module from source
   * @param options - Build options and context
   * @param compilation - Current compilation instance
   * @param resolver - Module resolver
   * @param fs - File system interface
   * @param callback - Completion callback
   */
  build(
    options: WebpackOptionsNormalized,
    compilation: Compilation,
    resolver: ResolverWithOptions,
    fs: InputFileSystem,
    callback: (err?: Error | null) => void
  ): void;
  
  /**
   * Get module size in bytes
   * @param type - Source type to measure
   * @returns Size in bytes
   */
  size(type?: string): number;
  
  /**
   * Update hash with module content
   * @param hash - Hash instance to update
   * @param context - Hash update context
   */
  updateHash(hash: Hash, context: UpdateHashContext): void;
}

Usage Examples:

// Custom module implementation
class CustomModule extends Module {
  constructor(resource) {
    super("custom", resource);
    this.resource = resource;
  }
  
  identifier() {
    return `custom ${this.resource}`;
  }
  
  readableIdentifier(requestShortener) {
    return `custom ${requestShortener(this.resource)}`;
  }
  
  size() {
    return 42; // Custom size calculation
  }
}

NormalModule Class

Represents standard file-based modules that are processed through loaders.

class NormalModule extends Module {
  /** Module request string */
  request: string;
  
  /** User request (original import/require) */
  userRequest: string;
  
  /** Raw request before resolution */
  rawRequest: string;
  
  /** Resolved resource path */
  resource: string;
  
  /** Resource path with query and fragment */
  resourceResolveData: ResourceResolveData;
  
  /** Matched loaders for this module */
  loaders: LoaderItem[];
  
  /** Parser instance for this module */
  parser: Parser;
  
  /** Generator instance for code generation */
  generator: Generator;
  
  /** Source of the module */
  _source: Source | null;
  
  /** Source map for the module */
  _sourceMap: SourceMap | null;
  
  /**
   * Create a new NormalModule
   * @param options - Module creation options
   */
  constructor(options: NormalModuleCreateData);
  
  /**
   * Get loaders with their options
   * @param compilation - Current compilation
   * @returns Array of loader configurations
   */
  getCurrentLoader(compilation: Compilation): LoaderItem | null;
  
  /**
   * Create source for this module
   * @param dependencyTemplates - Dependency templates
   * @param runtimeTemplate - Runtime template
   * @param type - Source type
   * @returns Generated source
   */
  source(
    dependencyTemplates: DependencyTemplates,
    runtimeTemplate: RuntimeTemplate,
    type?: string
  ): Source;
  
  /**
   * Get original source from loaders
   * @returns Original source
   */
  originalSource(): Source | null;
}

Usage Examples:

// Creating a NormalModule programmatically
const normalModule = new NormalModule({
  type: "javascript/auto",
  request: "babel-loader!./src/component.js",
  userRequest: "./src/component.js",
  rawRequest: "./src/component.js",
  loaders: [{
    loader: "babel-loader",
    options: {}
  }],
  resource: "/path/to/src/component.js",
  resourceResolveData: {},
  context: "/path/to/project",
  layer: null
});

ExternalModule Class

Represents modules that are provided externally and should not be bundled.

class ExternalModule extends Module {
  /** External module request */
  request: string;
  
  /** External type (e.g., "var", "commonjs", "amd") */
  externalType: string;
  
  /** User request string */
  userRequest: string;
  
  /** Whether this is optional */
  optional: boolean;
  
  /**
   * Create an external module
   * @param request - External module identifier
   * @param type - External module type
   * @param userRequest - Original user request
   */
  constructor(request: string, type: string, userRequest: string);
  
  /**
   * Get external item for code generation
   * @param dependencyTemplates - Dependency templates
   * @param runtimeTemplate - Runtime template
   * @returns External item configuration
   */
  getSourceForGlobalVariableExternal(
    variableName: string,
    type: string
  ): Source;
}

Usage Examples:

// External module for React (not bundled)
const reactExternal = new ExternalModule(
  "React", 
  "var", 
  "react"
);

// External CommonJS module
const lodashExternal = new ExternalModule(
  "lodash",
  "commonjs",
  "lodash"
);

DelegatedModule Class

Represents modules from DLL (Dynamic Link Library) references.

class DelegatedModule extends Module {
  /** Source request for the delegate */
  sourceRequest: string;
  
  /** Request in the delegated scope */
  request: string;
  
  /** Delegation scope */
  delegationType: string;
  
  /** User request string */
  userRequest: string;
  
  /** Original module reference */
  originalRequest: string;
  
  /**
   * Create a delegated module
   * @param sourceRequest - Source request string
   * @param data - Delegation data
   */
  constructor(sourceRequest: string, data: DelegatedModuleData);
  
  /**
   * Get delegated source
   * @param dependencyTemplates - Dependency templates
   * @param runtimeTemplate - Runtime template
   * @returns Generated source
   */
  source(
    dependencyTemplates: DependencyTemplates,
    runtimeTemplate: RuntimeTemplate
  ): Source;
}

Usage Examples:

// DLL module reference
const dllModule = new DelegatedModule("dll-reference vendor", {
  type: "require",
  request: "./node_modules/react/index.js"
});

RuntimeModule Class

Represents modules that contain webpack runtime code.

class RuntimeModule extends Module {
  /** Runtime module name */
  name: string;
  
  /** Stage for runtime module execution */
  stage: number;
  
  /** Whether this module is cacheable */
  cacheable: boolean;
  
  /** Fresh flag for cache invalidation */
  fresh: boolean;
  
  /**
   * Create a runtime module
   * @param name - Runtime module name
   * @param stage - Execution stage
   */
  constructor(name: string, stage?: number);
  
  /**
   * Generate runtime code
   * @returns Runtime source code
   */
  generate(): Source | null;
  
  /**
   * Get runtime requirements
   * @returns Set of runtime requirements
   */
  getGeneratedRuntimeRequirements(): ReadonlySet<string>;
  
  /**
   * Attach to chunk
   * @param chunk - Target chunk
   */
  attach(compilation: Compilation, chunk: Chunk, chunkGraph: ChunkGraph): void;
}

Usage Examples:

// Custom runtime module
class CustomRuntimeModule extends RuntimeModule {
  constructor() {
    super("custom-runtime", 0);
  }
  
  generate() {
    return new RawSource(`
      // Custom runtime code
      __webpack_require__.custom = function() {
        return "custom functionality";
      };
    `);
  }
}

ModuleGraph Class

Manages the dependency graph between modules, tracking relationships and providing graph operations.

class ModuleGraph {
  /** 
   * Set parent module for a dependency
   * @param dependency - The dependency
   * @param parentModule - Parent module containing the dependency
   */
  setParents(
    dependency: Dependency, 
    parentModule: Module, 
    parentBlock?: DependenciesBlock
  ): void;
  
  /**
   * Get parent module of a dependency
   * @param dependency - The dependency
   * @returns Parent module or null
   */
  getParentModule(dependency: Dependency): Module | null;
  
  /**
   * Set resolved module for a dependency
   * @param originModule - Module containing the dependency
   * @param dependency - The dependency
   * @param module - Resolved target module
   */
  setResolvedModule(
    originModule: Module,
    dependency: Dependency,
    module: Module
  ): void;
  
  /**
   * Update module with new instance
   * @param dependency - The dependency
   * @param module - New module instance
   */
  updateModule(dependency: Dependency, module: Module): void;
  
  /**
   * Remove connection between modules
   * @param dependency - The dependency to remove
   */
  removeConnection(dependency: Dependency): void;
  
  /**
   * Get module resolved by dependency
   * @param dependency - The dependency
   * @returns Resolved module or null
   */
  getModule(dependency: Dependency): Module | null;
  
  /**
   * Get connection information
   * @param dependency - The dependency
   * @returns Connection details or undefined
   */
  getConnection(dependency: Dependency): ModuleGraphConnection | undefined;
  
  /**
   * Get all outgoing connections from a module
   * @param module - Source module
   * @returns Iterable of connections
   */
  getOutgoingConnections(module: Module): Iterable<ModuleGraphConnection>;
  
  /**
   * Get all incoming connections to a module
   * @param module - Target module
   * @returns Iterable of connections
   */
  getIncomingConnections(module: Module): Iterable<ModuleGraphConnection>;
  
  /**
   * Get profile information for a module
   * @param module - The module
   * @returns Module profile or null
   */
  getProfile(module: Module): ModuleProfile | null;
  
  /**
   * Set profile for a module
   * @param module - The module
   * @param profile - Profile information
   */
  setProfile(module: Module, profile: ModuleProfile | null): void;
}

Usage Examples:

// Working with module graph
const moduleGraph = compilation.moduleGraph;

// Get dependencies of a module
const connections = moduleGraph.getOutgoingConnections(module);
for (const connection of connections) {
  console.log(`${module.identifier()} depends on ${connection.module.identifier()}`);
}

// Find modules that depend on a specific module
const incomingConnections = moduleGraph.getIncomingConnections(targetModule);
for (const connection of incomingConnections) {
  console.log(`${connection.originModule.identifier()} uses ${targetModule.identifier()}`);
}

ChunkGraph Class

Maps modules to chunks and manages chunk relationships and optimization.

class ChunkGraph {
  /**
   * Connect chunk and module
   * @param chunk - The chunk
   * @param module - The module
   */
  connectChunkAndModule(chunk: Chunk, module: Module): void;
  
  /**
   * Disconnect chunk and module
   * @param chunk - The chunk
   * @param module - The module
   */
  disconnectChunkAndModule(chunk: Chunk, module: Module): void;
  
  /**
   * Disconnect chunk from all modules
   * @param chunk - The chunk to disconnect
   */
  disconnectChunk(chunk: Chunk): void;
  
  /**
   * Attach runtime modules to chunk
   * @param chunk - Target chunk
   * @param module - Runtime module to attach
   */
  attachRuntimeModules(chunk: Chunk, modules: Iterable<RuntimeModule>): void;
  
  /**
   * Attach full hash modules to chunk
   * @param chunk - Target chunk
   * @param modules - Modules requiring full hash
   */
  attachFullHashModules(chunk: Chunk, modules: Iterable<RuntimeModule>): void;
  
  /**
   * Replace module in chunk
   * @param oldModule - Module to replace
   * @param newModule - Replacement module
   */
  replaceModule(oldModule: Module, newModule: Module): void;
  
  /**
   * Check if module is in chunk
   * @param module - The module
   * @param chunk - The chunk
   * @returns True if module is in chunk
   */
  isModuleInChunk(module: Module, chunk: Chunk): boolean;
  
  /**
   * Get modules in chunk
   * @param chunk - The chunk
   * @returns Iterable of modules
   */
  getChunkModules(chunk: Chunk): Iterable<Module>;
  
  /**
   * Get ordered chunk modules
   * @param chunk - The chunk
   * @param comparator - Module comparison function
   * @returns Ordered array of modules
   */
  getOrderedChunkModules(
    chunk: Chunk, 
    comparator: (a: Module, b: Module) => number
  ): Module[];
  
  /**
   * Get chunks containing module
   * @param module - The module
   * @returns Iterable of chunks
   */
  getModuleChunks(module: Module): Iterable<Chunk>;
  
  /**
   * Get number of chunk modules
   * @param chunk - The chunk
   * @returns Module count
   */
  getNumberOfChunkModules(chunk: Chunk): number;
  
  /**
   * Get chunk graph module
   * @param module - The module
   * @returns Chunk graph module data
   */
  getChunkGraphModule(module: Module): ChunkGraphModule;
  
  /**
   * Get module ID in chunk
   * @param module - The module
   * @param chunk - The chunk
   * @returns Module ID or null
   */
  getModuleId(module: Module): string | number | null;
  
  /**
   * Set module ID
   * @param module - The module
   * @param id - ID to assign
   */
  setModuleId(module: Module, id: string | number): void;
  
  /**
   * Get runtime requirements for chunk
   * @param chunk - The chunk
   * @returns Set of runtime requirements
   */
  getChunkRuntimeRequirements(chunk: Chunk): ReadonlySet<string>;
  
  /**
   * Add chunk runtime requirements
   * @param chunk - The chunk
   * @param requirements - Runtime requirements to add
   */
  addChunkRuntimeRequirements(
    chunk: Chunk, 
    requirements: Iterable<string>
  ): void;
}

Usage Examples:

// Working with chunk graph
const chunkGraph = compilation.chunkGraph;

// Add module to chunk
chunkGraph.connectChunkAndModule(chunk, module);

// Get all modules in a chunk
const modules = chunkGraph.getChunkModules(entryChunk);
for (const module of modules) {
  console.log(`Chunk contains: ${module.identifier()}`);
}

// Find which chunks contain a module
const chunks = chunkGraph.getModuleChunks(module);
for (const chunk of chunks) {
  console.log(`Module is in chunk: ${chunk.name || chunk.id}`);
}

Chunk Class

Represents a bundle of modules that will be emitted as a single file.

class Chunk {
  /** Chunk identifier */
  id: string | number | null;
  
  /** Chunk IDs (can have multiple) */
  ids: (string | number)[] | null;
  
  /** Debug ID for development */
  debugId: number;
  
  /** Chunk name */
  name: string | null;
  
  /** ID name mapping */
  idNameHints: Set<string>;
  
  /** Whether chunk prevents integration */
  preventIntegration: boolean;
  
  /** Files generated by this chunk */
  files: Set<string>;
  
  /** Auxiliary files */
  auxiliaryFiles: Set<string>;
  
  /** Runtime requirements */
  runtime: RuntimeSpec;
  
  /** Chunk hash */
  hash: string | null;
  
  /** Content hash by type */
  contentHash: Record<string, string>;
  
  /** Rendered hash */
  renderedHash: string | null;
  
  /** Chunk reason for creation */
  chunkReason: string | null;
  
  /**
   * Create a new chunk
   * @param name - Optional chunk name
   */
  constructor(name?: string);
  
  /**
   * Check if chunk has entry module
   * @returns True if chunk is an entry chunk
   */
  hasEntryModule(): boolean;
  
  /**
   * Add group to chunk
   * @param chunkGroup - Chunk group to add
   */
  addGroup(chunkGroup: ChunkGroup): void;
  
  /**
   * Remove group from chunk
   * @param chunkGroup - Chunk group to remove
   */
  removeGroup(chunkGroup: ChunkGroup): void;
  
  /**
   * Check if chunk is in group
   * @param chunkGroup - Chunk group to check
   * @returns True if chunk is in group
   */
  isInGroup(chunkGroup: ChunkGroup): boolean;
  
  /**
   * Get number of groups
   * @returns Group count
   */
  getNumberOfGroups(): number;
  
  /**
   * Get all chunk groups
   * @returns Iterable of chunk groups
   */
  groupsIterable: Iterable<ChunkGroup>;
  
  /**
   * Compare chunks for sorting
   * @param otherChunk - Chunk to compare with
   * @returns Comparison result
   */
  compareTo(otherChunk: Chunk): number;
  
  /**
   * Check if chunk contains module
   * @param module - Module to check
   * @returns True if chunk contains module
   */
  containsModule(module: Module): boolean;
  
  /**
   * Get chunk modules
   * @returns Iterable of modules
   */
  modulesIterable: Iterable<Module>;
  
  /**
   * Get chunk size
   * @param options - Size calculation options
   * @returns Chunk size
   */
  size(options?: ChunkSizeOptions): number;
  
  /**
   * Get integrated size
   * @param otherChunk - Chunk to integrate with
   * @param options - Size options
   * @returns Integrated size
   */
  integratedSize(otherChunk: Chunk, options: ChunkSizeOptions): number;
  
  /**
   * Check if chunk can be integrated
   * @param otherChunk - Chunk to check integration with
   * @returns True if chunks can be integrated
   */
  canBeIntegrated(otherChunk: Chunk): boolean;
  
  /**
   * Integrate with other chunk
   * @param otherChunk - Chunk to integrate
   * @returns True if integration was successful
   */
  integrate(otherChunk: Chunk): boolean;
  
  /**
   * Check if chunk can be initial
   * @returns True if chunk can be initial
   */
  canBeInitial(): boolean;
  
  /**
   * Check if chunk is only initial
   * @returns True if chunk is only initial
   */
  isOnlyInitial(): boolean;
  
  /**
   * Get chunk hash based on modules
   * @param chunkGraph - Chunk graph instance
   * @returns Chunk hash
   */
  getChunkMaps(chunkGraph: ChunkGraph): ChunkMaps;
}

Usage Examples:

// Create and configure a chunk
const chunk = new Chunk("my-chunk");
chunk.name = "vendor";
chunk.chunkReason = "split vendor code";

// Check chunk properties
if (chunk.hasEntryModule()) {
  console.log("This is an entry chunk");
}

// Get chunk size
const sizeOptions = { chunkOverhead: 10000, entryChunkMultiplicator: 10 };
const size = chunk.size(sizeOptions);
console.log(`Chunk size: ${size} bytes`);

ChunkGroup Class

Groups related chunks together for loading and optimization purposes.

class ChunkGroup {
  /** Group options */
  groupDebugId: number;
  
  /** Group options */
  options: ChunkGroupOptions;
  
  /** Chunks in this group */
  _chunks: Chunk[];
  
  /** Parent groups */
  _parents: Set<ChunkGroup>;
  
  /** Children groups */
  _children: Set<ChunkGroup>;
  
  /** Async chunks */
  _asyncEntrypoints: Set<ChunkGroup>;
  
  /** Block origins */
  _origins: OriginRecord[];
  
  /**
   * Create chunk group
   * @param options - Group configuration options
   */
  constructor(options?: ChunkGroupOptions);
  
  /**
   * Add chunk to group
   * @param chunk - Chunk to add
   * @returns True if chunk was added
   */
  insertChunk(chunk: Chunk, before?: Chunk): boolean;
  
  /**
   * Remove chunk from group
   * @param chunk - Chunk to remove
   * @returns True if chunk was removed
   */
  removeChunk(chunk: Chunk): boolean;
  
  /**
   * Check if group is initial
   * @returns True if initial group
   */
  isInitial(): boolean;
  
  /**
   * Add child group
   * @param child - Child group to add
   * @returns True if child was added
   */
  addChild(child: ChunkGroup): boolean;
  
  /**
   * Get children groups
   * @returns Array of child groups
   */
  getChildren(): ChunkGroup[];
  
  /**
   * Get parent groups
   * @returns Array of parent groups
   */
  getParents(): ChunkGroup[];
  
  /**
   * Add parent group
   * @param parent - Parent group to add
   * @returns True if parent was added
   */
  addParent(parent: ChunkGroup): boolean;
  
  /**
   * Remove parent group
   * @param parent - Parent group to remove
   */
  removeParent(parent: ChunkGroup): void;
  
  /**
   * Remove child group
   * @param child - Child group to remove
   */
  removeChild(child: ChunkGroup): void;
  
  /**
   * Get all chunks in group
   * @returns Array of chunks
   */
  getChunks(): Chunk[];
  
  /**
   * Get number of chunks
   * @returns Chunk count
   */
  getNumberOfChunks(): number;
  
  /**
   * Check if group has chunk
   * @param chunk - Chunk to check
   * @returns True if group has chunk
   */
  hasChunk(chunk: Chunk): boolean;
  
  /**
   * Compare chunk groups
   * @param otherGroup - Group to compare with
   * @returns Comparison result
   */
  compareTo(otherGroup: ChunkGroup): number;
  
  /**
   * Get module pre order index
   * @param module - Module to get index for
   * @returns Pre order index
   */
  getModulePreOrderIndex(module: Module): number | null;
  
  /**
   * Get module post order index
   * @param module - Module to get index for
   * @returns Post order index
   */
  getModulePostOrderIndex(module: Module): number | null;
  
  /**
   * Set module pre order index
   * @param module - Module to set index for
   * @param index - Index value
   */
  setModulePreOrderIndex(module: Module, index: number): boolean;
  
  /**
   * Set module post order index
   * @param module - Module to set index for
   * @param index - Index value
   */
  setModulePostOrderIndex(module: Module, index: number): boolean;
}

Usage Examples:

// Create chunk group for vendor libraries
const vendorGroup = new ChunkGroup({
  name: "vendor"
});

// Add chunks to group
vendorGroup.insertChunk(vendorChunk);
vendorGroup.insertChunk(runtimeChunk);

// Set up parent-child relationships
vendorGroup.addChild(asyncGroup);
mainGroup.addChild(vendorGroup);

Entrypoint Class

Special chunk group representing application entry points.

class Entrypoint extends ChunkGroup {
  /** Entry options */
  options: EntrypointOptions;
  
  /** Runtime chunk */
  _runtimeChunk: Chunk | null;
  
  /** Entry module */
  _entrypointChunk: Chunk | null;
  
  /**
   * Create entrypoint
   * @param options - Entry configuration
   */
  constructor(options: EntrypointOptions);
  
  /**
   * Check if this is an entrypoint
   * @returns Always true for Entrypoint
   */
  isInitial(): boolean;
  
  /**
   * Set runtime chunk
   * @param chunk - Runtime chunk
   */
  setRuntimeChunk(chunk: Chunk): void;
  
  /**
   * Get runtime chunk
   * @returns Runtime chunk or null
   */
  getRuntimeChunk(): Chunk | null;
  
  /**
   * Set entrypoint chunk  
   * @param chunk - Entrypoint chunk
   */
  setEntrypointChunk(chunk: Chunk): void;
  
  /**
   * Get entrypoint chunk
   * @returns Entrypoint chunk or null
   */
  getEntrypointChunk(): Chunk | null;
  
  /**
   * Replace chunk in entrypoint
   * @param oldChunk - Chunk to replace
   * @param newChunk - Replacement chunk
   */
  replaceChunk(oldChunk: Chunk, newChunk: Chunk): boolean;
}

Usage Examples:

// Create application entrypoint
const mainEntry = new Entrypoint({
  name: "main"
});

// Set up entry and runtime chunks
mainEntry.setEntrypointChunk(entryChunk);
mainEntry.setRuntimeChunk(runtimeChunk);

// Add to compilation
compilation.entrypoints.set("main", mainEntry);

Dependency System

Base Dependency Class

Abstract base class for all module dependencies.

class Dependency {
  /** Dependency type */
  type: string;
  
  /** Category for grouping */
  category: string;
  
  /** Location in source code */
  loc: SourceLocation | null;
  
  /** Weak dependency flag */
  weak: boolean;
  
  /** Optional dependency flag */
  optional: boolean;
  
  /**
   * Get dependency type
   * @returns Dependency type string
   */
  getType(): string;
  
  /**
   * Get dependency category
   * @returns Category string
   */
  getCategory(): string;
  
  /**
   * Get reference exports
   * @param moduleGraph - Module graph instance
   * @param runtime - Runtime information
   * @returns Export references
   */
  getReferencedExports(
    moduleGraph: ModuleGraph,
    runtime: RuntimeSpec
  ): (string[] | ReferencedExport)[] | null;
  
  /**
   * Get resource identifier
   * @returns Resource identifier or null
   */
  getResourceIdentifier(): string | null;
  
  /**
   * Get module evaluation side effects
   * @param moduleGraph - Module graph instance
   * @returns Side effects flag
   */
  getModuleEvaluationSideEffectsState(
    moduleGraph: ModuleGraph
  ): ConnectionState;
  
  /**
   * Create hash of dependency
   * @param hash - Hash instance
   */
  updateHash(hash: Hash): void;
  
  /**
   * Serialize dependency
   * @param context - Serialization context
   */
  serialize(context: ObjectSerializerContext): void;
  
  /**
   * Deserialize dependency
   * @param context - Deserialization context
   */
  deserialize(context: ObjectDeserializerContext): void;
}

ModuleDependency Class

Dependency between modules with request resolution.

class ModuleDependency extends Dependency {
  /** Module request string */
  request: string;
  
  /** User request (original) */
  userRequest: string;
  
  /** Request range in source */
  range: [number, number] | null;
  
  /**
   * Create module dependency
   * @param request - Module request string
   */
  constructor(request: string);
  
  /**
   * Get request string
   * @returns Request string
   */
  getRequest(): string;
  
  /**
   * Get condition for module evaluation
   * @param moduleGraph - Module graph instance
   * @returns Connection state
   */
  getCondition(moduleGraph: ModuleGraph): ConnectionState | null;
}

HarmonyImportDependency Class

ES6 import/export dependencies for harmony modules.

class HarmonyImportDependency extends ModuleDependency {
  /** Import source range */
  sourceOrder: number;
  
  /** Parser scope */
  parserScope: any;
  
  /**
   * Create harmony import dependency
   * @param request - Import request
   * @param sourceOrder - Source order number
   * @param parserScope - Parser scope information
   */
  constructor(request: string, sourceOrder: number, parserScope?: any);
  
  /**
   * Get import variable
   * @returns Import variable name
   */
  getImportVar(moduleGraph: ModuleGraph): string;
  
  /**
   * Get imported module
   * @param moduleGraph - Module graph instance
   * @returns Imported module or null
   */
  getImportedModule(moduleGraph: ModuleGraph): Module | null;
}

ConstDependency Class

Dependency on constant values that are replaced during compilation.

class ConstDependency extends Dependency {
  /** Expression to replace */
  expression: string;
  
  /** Range to replace */
  range: [number, number] | null;
  
  /** Runtime requirements */
  runtimeRequirements: Set<string> | null;
  
  /**
   * Create const dependency
   * @param expression - Replacement expression
   * @param range - Source range to replace
   * @param runtimeRequirements - Runtime requirements
   */
  constructor(
    expression: string, 
    range?: [number, number] | null,
    runtimeRequirements?: string[]
  );
  
  /**
   * Update hash with expression
   * @param hash - Hash instance
   */
  updateHash(hash: Hash): void;
}

NullDependency Class

No-operation dependency used as placeholder.

class NullDependency extends Dependency {
  /**
   * Create null dependency
   */
  constructor();
  
  /**
   * Compare with other dependency
   * @param other - Other dependency
   * @returns True if equal
   */
  compare(other: Dependency): boolean;
}

Dependency Usage Examples:

// Create module dependency
const moduleDep = new ModuleDependency("./utils/helper");
moduleDep.range = [10, 30]; // Character range in source

// ES6 import dependency
const importDep = new HarmonyImportDependency(
  "./components/Button", 
  0, 
  parserScope
);

// Constant replacement
const constDep = new ConstDependency(
  '"production"', 
  [45, 60], 
  [RuntimeGlobals.require]
);

// Add dependencies to module
module.addDependency(moduleDep);
module.addDependency(importDep);
module.addDependency(constDep);

ModuleFactory System

ModuleFactory Base Class

Abstract base for creating modules from dependency requests.

class ModuleFactory {
  /**
   * Create module from dependency
   * @param data - Module creation data
   * @param callback - Completion callback
   */
  create(
    data: ModuleFactoryCreateData,
    callback: (err?: Error, result?: ModuleFactoryResult) => void
  ): void;
}

NormalModuleFactory Class

Factory for creating standard file-based modules.

class NormalModuleFactory extends ModuleFactory {
  /** Resolver for modules */
  resolverFactory: ResolverFactory;
  
  /** Rule set for matching loaders */
  ruleSet: RuleSet;
  
  /** Context for resolution */
  context: string;
  
  /** File system interface */
  fs: InputFileSystem;
  
  /** Factory hooks */
  hooks: NormalModuleFactoryHooks;
  
  /**
   * Create normal module factory
   * @param options - Factory options
   */
  constructor(options: NormalModuleFactoryOptions);
  
  /**
   * Create module from request
   * @param data - Creation data including context and dependencies
   * @param callback - Module creation callback
   */
  create(
    data: ModuleFactoryCreateData,
    callback: (err?: Error, result?: NormalModuleFactoryResult) => void
  ): void;
  
  /**
   * Resolve module request
   * @param contextInfo - Context information
   * @param context - Base context path
   * @param request - Module request string
   * @param resolveOptions - Resolution options
   * @param callback - Resolution callback
   */
  resolveRequestArray(
    contextInfo: ModuleFactoryCreateDataContextInfo,
    context: string,
    request: string,
    resolveOptions: ResolveOptionsWithDependencyType,
    callback: (err?: Error, result?: any[]) => void
  ): void;
}

ContextModuleFactory Class

Factory for creating context (directory) modules.

class ContextModuleFactory extends ModuleFactory {
  /** Resolver factory */
  resolverFactory: ResolverFactory;
  
  /**
   * Create context module factory
   * @param resolverFactory - Resolver factory instance
   */
  constructor(resolverFactory: ResolverFactory);
  
  /**
   * Create context module
   * @param data - Context creation data
   * @param callback - Creation callback
   */
  create(
    data: ModuleFactoryCreateData,
    callback: (err?: Error, result?: ContextModuleFactoryResult) => void
  ): void;
}

ModuleFactory Usage Examples:

// Using normal module factory
const normalModuleFactory = compilation.dependencyFactories.get(Dependency);

const createData = {
  contextInfo: {
    issuer: "/path/to/issuer.js"
  },
  context: "/path/to/context",
  dependencies: [dependency]
};

normalModuleFactory.create(createData, (err, result) => {
  if (err) {
    console.error("Module creation failed:", err);
    return;
  }
  
  const module = result.module;
  console.log("Created module:", module.identifier());
});

Parser System

Base parser class for analyzing module source code and extracting dependencies.

class Parser {
  /**
   * Parse module source
   * @param source - Module source code
   * @param state - Parser state
   * @returns Parser result
   */
  parse(source: string | Buffer, state: ParserState): ParserResult;
}

Parser Usage Examples:

// JavaScript parser extracts dependencies
const parser = new JavascriptParser("auto");

// Parse result contains AST and dependencies
const result = parser.parse(source, {
  current: normalModule,
  module: normalModule,
  compilation: compilation,
  options: compilation.options
});

Generator System

Base generator class for creating output code from modules.

class Generator {
  /**
   * Generate code for module
   * @param module - Module to generate code for
   * @param generateContext - Generation context
   * @returns Generated source
   */
  generate(module: Module, generateContext: GenerateContext): Source;
  
  /**
   * Get concatenation bailout reason
   * @param module - Module to check
   * @param generateContext - Generation context
   * @returns Bailout reason or undefined
   */
  getConcatenationBailoutReason(
    module: Module, 
    generateContext: GenerateContext
  ): string | undefined;
  
  /**
   * Update hash with generator state
   * @param hash - Hash instance
   * @param generateContext - Generation context
   */
  updateHash(hash: Hash, generateContext: GenerateContext): void;
}

Generator Usage Examples:

// JavaScript generator creates output code
const generator = new JavascriptGenerator();

const source = generator.generate(module, {
  dependencyTemplates,
  runtimeTemplate,
  moduleGraph,
  chunkGraph,
  runtimeRequirements,
  runtime,
  type: "javascript"
});

Module Types and Constants

Webpack defines various module types and constants for the module system.

// Module type constants
const MODULE_TYPE = {
  JAVASCRIPT_AUTO: "javascript/auto",
  JAVASCRIPT_DYNAMIC: "javascript/dynamic", 
  JAVASCRIPT_ESM: "javascript/esm",
  JSON: "json",
  WEBASSEMBLY_SYNC: "webassembly/sync",
  WEBASSEMBLY_ASYNC: "webassembly/async",
  ASSET_RESOURCE: "asset/resource",
  ASSET_INLINE: "asset/inline",
  ASSET: "asset",
  RUNTIME: "runtime"
};

// Dependency categories
const DEPENDENCY_CATEGORY = {
  ESM: "esm",
  COMMONJS: "commonjs", 
  AMD: "amd",
  REQUIRE_CONTEXT: "require.context",
  WORKER: "worker",
  URL: "url"
};

// Connection states for dependencies
const CONNECTION_STATE = {
  BOOL_TRUE: true,
  BOOL_FALSE: false,
  CIRCULAR_CONNECTION: Symbol("circular connection"),
  TRANSITIVE_CONNECTION: Symbol("transitive connection")
};

Integration Examples

Creating a Custom Module System

// Custom module factory
class CustomModuleFactory extends ModuleFactory {
  create(data, callback) {
    const { context, dependencies } = data;
    const dependency = dependencies[0];
    
    // Create custom module based on request pattern
    if (dependency.request.startsWith("custom:")) {
      const module = new CustomModule(dependency.request);
      callback(null, { module });
    } else {
      callback(new Error("Invalid custom module request"));
    }
  }
}

// Register factory in compilation
compilation.dependencyFactories.set(CustomDependency, customModuleFactory);

Working with Module Graph

// Analyze module relationships
function analyzeModuleGraph(compilation) {
  const moduleGraph = compilation.moduleGraph;
  const modules = compilation.modules;
  
  const analysis = {
    totalModules: modules.size,
    circularDependencies: [],
    largestModules: [],
    dependencyDepth: new Map()
  };
  
  // Find circular dependencies
  for (const module of modules) {
    const visited = new Set();
    if (hasCycle(module, moduleGraph, visited)) {
      analysis.circularDependencies.push(module);
    }
  }
  
  // Calculate dependency depths
  for (const module of modules) {
    analysis.dependencyDepth.set(
      module, 
      calculateDepth(module, moduleGraph)
    );
  }
  
  return analysis;
}

function hasCycle(module, moduleGraph, visited, path = new Set()) {
  if (path.has(module)) return true;
  if (visited.has(module)) return false;
  
  visited.add(module);
  path.add(module);
  
  const connections = moduleGraph.getOutgoingConnections(module);
  for (const connection of connections) {
    if (connection.module && hasCycle(connection.module, moduleGraph, visited, path)) {
      return true;
    }
  }
  
  path.delete(module);
  return false;
}

Chunk Organization

// Custom chunk splitting strategy
class CustomChunkSplitter {
  apply(compiler) {
    compiler.hooks.compilation.tap("CustomChunkSplitter", (compilation) => {
      compilation.hooks.optimizeChunks.tap("CustomChunkSplitter", (chunks) => {
        const chunkGraph = compilation.chunkGraph;
        
        // Split large chunks
        for (const chunk of chunks) {
          const modules = chunkGraph.getChunkModules(chunk);
          const moduleArray = Array.from(modules);
          
          if (moduleArray.length > 50) {
            const newChunk = compilation.addChunk(`${chunk.name}-split`);
            const halfSize = Math.floor(moduleArray.length / 2);
            
            // Move half the modules to new chunk
            for (let i = halfSize; i < moduleArray.length; i++) {
              chunkGraph.disconnectChunkAndModule(chunk, moduleArray[i]);
              chunkGraph.connectChunkAndModule(newChunk, moduleArray[i]);
            }
          }
        }
      });
    });
  }
}

Runtime Module Creation

// Custom runtime functionality
class CustomRuntimeModule extends RuntimeModule {
  constructor() {
    super("custom-loader", RuntimeModule.STAGE_NORMAL);
  }
  
  generate() {
    return new RawSource(`
      // Custom runtime functionality
      __webpack_require__.customLoader = function(moduleId) {
        console.log('Loading module:', moduleId);
        return __webpack_require__(moduleId);
      };
      
      // Add custom module cache
      __webpack_require__.customCache = Object.create(null);
    `);
  }
  
  getGeneratedRuntimeRequirements() {
    return new Set([RuntimeGlobals.require, RuntimeGlobals.moduleCache]);
  }
}

// Add to compilation
compilation.addRuntimeModule(chunk, new CustomRuntimeModule());

The webpack module system provides a comprehensive architecture for managing code organization, dependency tracking, and build optimization. Understanding these core classes and their relationships enables powerful customization of the webpack build process and creation of advanced tooling and plugins.

Install with Tessl CLI

npx tessl i tessl/npm-webpack

docs

configuration.md

core-compilation.md

development-tools.md

index.md

module-system.md

optimization.md

plugins.md

runtime-system.md

utilities.md

tile.json