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

development-tools.mddocs/

Development Tools

Webpack's development tools provide a comprehensive suite of plugins and features designed to enhance the developer experience. These tools enable hot module replacement, source map generation, progress reporting, file watching, debugging capabilities, and seamless integration with development servers for efficient development workflows.

Capabilities

Hot Module Replacement

Hot Module Replacement (HMR) allows modules to be updated at runtime without requiring a full page refresh, dramatically improving development speed and preserving application state.

/**
 * Enables Hot Module Replacement for faster development cycles
 * @param options - HMR configuration options
 */
class HotModuleReplacementPlugin {
  constructor(options?: {
    /** Enable multi-step mode for better HMR performance */
    multiStep?: boolean;
    /** Timeout for full rebuild in milliseconds */
    fullBuildTimeout?: number;
    /** Timeout for HMR requests in milliseconds */
    requestTimeout?: number;
  });
}

Usage Examples:

const webpack = require("webpack");

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    hot: true,
    port: 3000
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin({
      multiStep: true,
      fullBuildTimeout: 200,
      requestTimeout: 10000
    })
  ]
};

// In your application code
if (module.hot) {
  module.hot.accept('./component.js', () => {
    console.log('Component updated!');
    // Re-render component without page refresh
  });
  
  // Handle disposal
  module.hot.dispose(() => {
    // Cleanup before module replacement
  });
}

Source Map Generation

Source maps enable debugging of bundled code by mapping minified/transformed code back to original source files with precise line and column information.

/**
 * Generates source maps with fine-grained control over format and output
 * @param options - Source map generation options
 */
class SourceMapDevToolPlugin {
  constructor(options?: {
    /** Output filename pattern for source maps */
    filename?: string | false;
    /** Include files matching these patterns */
    include?: string | RegExp | Array<string | RegExp>;
    /** Exclude files matching these patterns */
    exclude?: string | RegExp | Array<string | RegExp>;
    /** Template for module filenames in source maps */
    moduleFilenameTemplate?: string | ((info: ModuleFilenameTemplateInfo) => string);
    /** Fallback template when main template fails */
    fallbackModuleFilenameTemplate?: string | ((info: ModuleFilenameTemplateInfo) => string);
    /** String appended to source map comment */
    append?: string | false;
    /** Include module names in source maps */
    module?: boolean;
    /** Include column information in source maps */
    columns?: boolean;
    /** Enable line-to-line mode for faster source maps */
    lineToLine?: boolean | { test?: RegExp | Array<RegExp> };
    /** Exclude source content from source maps */
    noSources?: boolean;
    /** Public path for source map URLs */
    publicPath?: string;
    /** Context path for file URLs */
    fileContext?: string;
    /** Source root URL prefix */
    sourceRoot?: string;
  });
}

/**
 * Fast source maps using eval() for development builds
 * @param options - Eval source map options
 */
class EvalSourceMapDevToolPlugin {
  constructor(options?: {
    /** Include files matching these patterns */
    include?: string | RegExp | Array<string | RegExp>;
    /** Exclude files matching these patterns */
    exclude?: string | RegExp | Array<string | RegExp>;
    /** Template for module filenames */
    moduleFilenameTemplate?: string | ((info: ModuleFilenameTemplateInfo) => string);
    /** Include module names */
    module?: boolean;
    /** Include column information */
    columns?: boolean;
    /** Enable line-to-line mode */
    lineToLine?: boolean | { test?: RegExp | Array<RegExp> };
  });
}

/**
 * Wraps modules in eval() statements for better debugging without source maps
 * @param options - Eval dev tool options
 */
class EvalDevToolModulePlugin {
  constructor(options?: {
    /** Template for module filenames in eval statements */
    moduleFilenameTemplate?: string | ((info: ModuleFilenameTemplateInfo) => string);
    /** Comment template for source URLs */
    sourceUrlComment?: string;
  });
}

interface ModuleFilenameTemplateInfo {
  identifier: string;
  shortIdentifier: string;
  resource: string;
  resourcePath: string;
  absoluteResourcePath: string;
  loaders: string;
  allLoaders: string;
  query: string;
  moduleId: string | number;
  hash: string;
  namespace: string;
}

Usage Examples:

const webpack = require("webpack");

// Production source maps
module.exports = {
  mode: 'production',
  devtool: false, // Disable default devtool
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map[query]',
      include: /\.(js|css)$/,
      exclude: /vendor/,
      moduleFilenameTemplate: 'webpack://[namespace]/[resource-path]?[loaders]',
      publicPath: 'https://cdn.example.com/sourcemaps/',
      columns: false,
      noSources: false
    })
  ]
};

// Development eval source maps
module.exports = {
  mode: 'development',
  devtool: false,
  plugins: [
    new webpack.EvalSourceMapDevToolPlugin({
      include: /\.js$/,
      exclude: /node_modules/,
      moduleFilenameTemplate: 'webpack:///[resource-path]',
      columns: true
    })
  ]
};

// Eval debugging without source maps
module.exports = {
  mode: 'development',
  devtool: false,
  plugins: [
    new webpack.EvalDevToolModulePlugin({
      moduleFilenameTemplate: 'webpack:///[resource-path]',
      sourceUrlComment: '\n//# sourceURL=[url]'
    })
  ]
};

Progress Reporting

The ProgressPlugin provides detailed feedback about compilation progress, helping developers understand build performance and identify bottlenecks.

/**
 * Reports compilation progress during builds with customizable handlers
 * @param options - Progress reporting configuration
 */
class ProgressPlugin {
  constructor(options?: {
    /** Show active module count */
    activeModules?: boolean;
    /** Show entries progress */
    entries?: boolean;
    /** Custom progress handler function */
    handler?: (percentage: number, message: string, ...args: string[]) => void;
    /** Show modules progress */
    modules?: boolean;
    /** Expected number of modules for percentage calculation */
    modulesCount?: number;
    /** Enable performance profiling */
    profile?: boolean;
    /** Show dependencies progress */
    dependencies?: boolean;
    /** Expected number of dependencies */
    dependenciesCount?: number;
    /** Method for calculating percentage */
    percentBy?: 'entries' | 'modules' | 'dependencies' | null;
  });
}

Usage Examples:

const webpack = require("webpack");

module.exports = {
  plugins: [
    // Basic progress reporting
    new webpack.ProgressPlugin(),
    
    // Custom progress handler
    new webpack.ProgressPlugin({
      activeModules: true,
      entries: true,
      modules: true,
      dependencies: true,
      profile: true,
      handler: (percentage, message, ...args) => {
        const percent = Math.round(percentage * 100);
        const timestamp = new Date().toLocaleTimeString();
        console.log(`[${timestamp}] ${percent}% ${message} ${args.join(' ')}`);
      }
    }),
    
    // Integration with build tools
    new webpack.ProgressPlugin({
      handler: (percentage, message, ...args) => {
        if (process.env.CI) {
          // Minimal output for CI environments
          if (percentage === 0) console.log('Build started...');
          if (percentage === 1) console.log('Build completed!');
        } else {
          // Rich progress bar for development
          const width = 50;
          const filled = Math.round(width * percentage);
          const bar = '█'.repeat(filled) + '░'.repeat(width - filled);
          process.stdout.write(`\r[${bar}] ${Math.round(percentage * 100)}% ${message}`);
          if (percentage === 1) console.log(); // New line when complete
        }
      }
    })
  ]
};

File Watching System

Webpack's watching system monitors file changes and triggers rebuilds automatically, essential for development workflows.

/**
 * Manages file watching for automatic rebuilds during development
 */
class Watching {
  /** Associated compiler instance */
  compiler: Compiler;
  
  /** Watch configuration options */
  options: WatchOptions;
  
  /** File system watcher instance */
  watcher: any;
  
  /**
   * Close watching and cleanup resources
   * @param callback - Completion callback
   */
  close(callback?: () => void): void;
  
  /**
   * Invalidate current compilation and trigger rebuild
   * @param filename - Optional filename that changed
   */
  invalidate(filename?: string): void;
  
  /**
   * Suspend watching temporarily without closing
   */
  suspend(): void;
  
  /**
   * Resume watching after suspension
   */
  resume(): void;
}

/**
 * Manages multiple watching instances for multi-compiler setups
 */
class MultiWatching {
  /** Array of individual watching instances */
  watchings: Watching[];
  
  /** Multi-compiler instance */
  compiler: MultiCompiler;
  
  /**
   * Close all watching instances
   * @param callback - Completion callback
   */
  close(callback?: () => void): void;
  
  /**
   * Invalidate all watching instances
   */
  invalidate(): void;
  
  /**
   * Suspend all watching instances
   */
  suspend(): void;
  
  /**
   * Resume all watching instances
   */
  resume(): void;
}

/**
 * Configuration options for file watching behavior
 */
interface WatchOptions {
  /** Delay in milliseconds before rebuilding after change */
  aggregateTimeout?: number;
  /** Enable polling for file changes (useful for network drives) */
  poll?: boolean | number;
  /** Files, directories, or patterns to ignore */
  ignored?: string | RegExp | string[] | ((path: string) => boolean);
  /** Follow symbolic links */
  followSymlinks?: boolean;
  /** Use stdin to stop watching in CLI mode */
  stdin?: boolean;
}

/**
 * Plugin to ignore specific files during watch mode
 * @param paths - Patterns of files to ignore during watching
 */
class WatchIgnorePlugin {
  constructor(paths: Array<string | RegExp>);
}

Usage Examples:

const webpack = require("webpack");
const path = require("path");

// Basic watching setup
const compiler = webpack(config);
const watching = compiler.watch({
  aggregateTimeout: 300,
  poll: 1000,
  ignored: [
    path.resolve(__dirname, 'node_modules'),
    path.resolve(__dirname, 'dist')
  ]
}, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err || stats.toString());
    return;
  }
  console.log('Rebuild completed!');
});

// Advanced watching configuration
module.exports = {
  plugins: [
    new webpack.WatchIgnorePlugin({
      paths: [
        /node_modules/,
        /\.git/,
        /\.DS_Store/,
        path.resolve(__dirname, 'temp'),
        path.resolve(__dirname, 'coverage')
      ]
    })
  ],
  watchOptions: {
    aggregateTimeout: 200,
    poll: false,
    ignored: [
      '**/node_modules',
      '**/.git',
      '**/temp/**'
    ],
    followSymlinks: false
  }
};

// Programmatic watching control
watching.invalidate(); // Trigger rebuild
watching.suspend();   // Pause watching
watching.resume();    // Resume watching
watching.close(() => {
  console.log('Watching ended');
});

Development Server Integration

Integration points and configuration for webpack development servers that provide live reloading, hot module replacement, and development middleware.

/**
 * DevTool options for debugging and development
 */
type DevTool = 
  | false
  | 'eval'
  | 'eval-cheap-source-map'
  | 'eval-cheap-module-source-map'
  | 'eval-source-map'
  | 'cheap-source-map'
  | 'cheap-module-source-map'
  | 'source-map'
  | 'inline-cheap-source-map'
  | 'inline-cheap-module-source-map'
  | 'inline-source-map'
  | 'eval-nosources-cheap-source-map'
  | 'eval-nosources-cheap-module-source-map'
  | 'eval-nosources-source-map'
  | 'inline-nosources-cheap-source-map'
  | 'inline-nosources-cheap-module-source-map'
  | 'inline-nosources-source-map'
  | 'nosources-cheap-source-map'
  | 'nosources-cheap-module-source-map'
  | 'nosources-source-map'
  | 'hidden-nosources-cheap-source-map'
  | 'hidden-nosources-cheap-module-source-map'
  | 'hidden-nosources-source-map'
  | 'hidden-cheap-source-map'
  | 'hidden-cheap-module-source-map'
  | 'hidden-source-map';

/**
 * Development mode specific optimizations and settings
 */
interface DevelopmentOptions {
  /** Development tool for debugging */
  devtool?: DevTool;
  /** Enable development mode optimizations */
  mode?: 'development';
  /** Watch mode configuration */
  watch?: boolean;
  /** Watch options */
  watchOptions?: WatchOptions;
  /** Development server configuration */
  devServer?: DevServerOptions;
  /** Enable caching for development */
  cache?: boolean | CacheOptions;
  /** Source map exclude patterns */
  infrastructureLogging?: {
    level?: 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose';
    debug?: string | RegExp | ((name: string) => boolean);
  };
}

interface DevServerOptions {
  /** Enable hot module replacement */
  hot?: boolean | 'only';
  /** Enable live reloading */
  liveReload?: boolean;
  /** Development server port */
  port?: number | string;
  /** Development server host */
  host?: string;
  /** Enable HTTPS */
  https?: boolean | ServerOptions;
  /** Static file serving configuration */
  static?: string | StaticOptions | Array<string | StaticOptions>;
  /** Proxy configuration */
  proxy?: ProxyConfig;
  /** History API fallback */
  historyApiFallback?: boolean | HistoryApiFallbackOptions;
  /** Overlay for compilation errors */
  client?: {
    overlay?: boolean | {
      errors?: boolean;
      warnings?: boolean;
    };
    progress?: boolean;
    reconnect?: boolean | number;
  };
}

Usage Examples:

const webpack = require("webpack");

// Development configuration with optimal debugging
module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: './src/index.js',
  
  // Development server setup
  devServer: {
    hot: true,
    liveReload: true,
    port: 3000,
    host: 'localhost',
    static: {
      directory: path.join(__dirname, 'public'),
      publicPath: '/assets'
    },
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/views/landing.html' },
        { from: /^\/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' }
      ]
    },
    client: {
      overlay: {
        errors: true,
        warnings: false
      },
      progress: true
    }
  },
  
  // Optimized for development
  cache: {
    type: 'memory'
  },
  
  infrastructureLogging: {
    level: 'info',
    debug: ['webpack-dev-server']
  },
  
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProgressPlugin({
      activeModules: true,
      modules: true,
      handler: (percentage, message, ...args) => {
        console.log(`${Math.round(percentage * 100)}% ${message} ${args.join(' ')}`);
      }
    })
  ]
};

// Multiple development configurations
const createDevConfig = (name, port) => ({
  name,
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  entry: `./src/${name}/index.js`,
  devServer: {
    port,
    hot: true,
    allowedHosts: 'all'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env.SERVICE_NAME': JSON.stringify(name)
    })
  ]
});

module.exports = [
  createDevConfig('frontend', 3000),
  createDevConfig('admin', 3001),
  createDevConfig('mobile', 3002)
];

Error Handling and Reporting

Comprehensive error handling and reporting capabilities for development debugging and build monitoring.

/**
 * Base class for webpack-specific errors with enhanced debugging information
 */
class WebpackError extends Error {
  /** Error name */
  name: string;
  
  /** Error message */
  message: string;
  
  /** Module associated with error */
  module?: Module;
  
  /** Location information */
  loc?: SourceLocation;
  
  /** Error details */
  details?: string;
  
  /** Related file path */
  file?: string;
  
  /** Hide error from stats output */
  hideStack?: boolean;
  
  /** Error chunk */
  chunk?: Chunk;
  
  constructor(message?: string);
}

/**
 * Compilation statistics with error and warning information
 */
class Stats {
  /** Associated compilation */
  compilation: Compilation;
  
  /**
   * Check if compilation has errors
   * @returns True if errors exist
   */
  hasErrors(): boolean;
  
  /**
   * Check if compilation has warnings
   * @returns True if warnings exist
   */
  hasWarnings(): boolean;
  
  /**
   * Get compilation errors
   * @returns Array of error objects
   */
  toJson(options?: StatsOptions): {
    errors: StatsError[];
    warnings: StatsError[];
    errorDetails?: string;
    // ... other stats properties
  };
}

interface StatsError {
  message: string;
  formatted?: string;
  moduleId?: string | number;
  moduleIdentifier?: string;
  moduleName?: string;
  loc?: string;
  file?: string;
  details?: string;
}

interface SourceLocation {
  line: number;
  column?: number;
  index?: number;
}

Usage Examples:

const webpack = require("webpack");

// Enhanced error reporting
const compiler = webpack(config);

compiler.hooks.done.tap('ErrorReporter', (stats) => {
  const info = stats.toJson({
    all: false,
    errors: true,
    warnings: true,
    errorDetails: true
  });
  
  if (stats.hasErrors()) {
    console.error('Build failed with errors:');
    info.errors.forEach((error, index) => {
      console.error(`\nError ${index + 1}:`);
      console.error(`File: ${error.file || 'unknown'}`);
      console.error(`Module: ${error.moduleName || 'unknown'}`);
      console.error(`Location: ${error.loc || 'unknown'}`);
      console.error(`Message: ${error.message}`);
      if (error.details) {
        console.error(`Details: ${error.details}`);
      }
    });
  }
  
  if (stats.hasWarnings()) {
    console.warn('Build completed with warnings:');
    info.warnings.forEach((warning, index) => {
      console.warn(`\nWarning ${index + 1}: ${warning.message}`);
    });
  }
});

// Custom error handling plugin
class ErrorHandlerPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('ErrorHandler', (compilation) => {
      compilation.hooks.buildModule.tap('ErrorHandler', (module) => {
        console.log(`Building module: ${module.identifier()}`);
      });
      
      compilation.hooks.failedModule.tap('ErrorHandler', (module, error) => {
        console.error(`Failed to build module: ${module.identifier()}`);
        console.error(`Error: ${error.message}`);
        
        // Enhanced error information
        const enhancedError = new WebpackError(
          `Module build failed: ${error.message}`
        );
        enhancedError.module = module;
        enhancedError.file = module.resource;
        enhancedError.details = error.stack;
        
        compilation.errors.push(enhancedError);
      });
    });
  }
}

module.exports = {
  plugins: [
    new ErrorHandlerPlugin()
  ],
  
  stats: {
    errors: true,
    warnings: true,
    errorDetails: true,
    colors: true,
    modules: false,
    chunks: false
  }
};

Development Mode Optimizations

Optimizations and settings specifically designed for development builds to improve build speed and debugging experience.

/**
 * Development-specific optimization settings
 */
interface DevelopmentOptimization {
  /** Disable minimization in development */
  minimize?: false;
  
  /** Fast module concatenation for development */
  concatenateModules?: false;
  
  /** Remove empty chunks */
  removeEmptyChunks?: boolean;
  
  /** Merge duplicate chunks */
  mergeDuplicateChunks?: boolean;
  
  /** Flag included chunks */
  flagIncludedChunks?: false;
  
  /** Remove available modules optimization */
  removeAvailableModules?: false;
  
  /** Provide bail out reasons for optimizations */
  providedExports?: boolean;
  
  /** Use exports analysis */
  usedExports?: boolean;
  
  /** Enable side effects analysis */
  sideEffects?: boolean;
  
  /** Node environment for process.env.NODE_ENV */
  nodeEnv?: 'development';
}

/**
 * Cache configuration optimized for development
 */
interface DevelopmentCache {
  /** Cache type */
  type: 'memory' | 'filesystem';
  
  /** Cache name for multiple configurations */
  name?: string;
  
  /** Cache version */
  version?: string;
  
  /** Build dependencies for cache invalidation */
  buildDependencies?: {
    config?: string[];
    defaultWebpack?: string[];
  };
  
  /** Memory cache specific options */
  maxGenerations?: number;
  cacheUnaffected?: boolean;
  
  /** Filesystem cache options */
  cacheDirectory?: string;
  compression?: false | 'gzip' | 'brotli';
  hashAlgorithm?: string;
  store?: 'pack';
  allowCollectingMemory?: boolean;
}

Usage Examples:

const webpack = require("webpack");
const path = require("path");

// Optimized development configuration
module.exports = {
  mode: 'development',
  
  // Fast rebuilds with memory caching
  cache: {
    type: 'memory',
    maxGenerations: 1,
    cacheUnaffected: true
  },
  
  // Development optimizations
  optimization: {
    minimize: false,
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false,
    concatenateModules: false,
    flagIncludedChunks: false,
    nodeEnv: 'development'
  },
  
  // Fast source maps
  devtool: 'eval-cheap-module-source-map',
  
  // Development-specific plugins
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    
    // Enhanced development environment
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      '__DEV__': true,
      '__PROD__': false
    }),
    
    new webpack.ProgressPlugin({
      activeModules: false,
      entries: true,
      handler(percentage, message, ...args) {
        // Only show major milestones to reduce noise
        if (percentage === 0 || percentage === 1) {
          console.log(`${Math.round(percentage * 100)}% ${message}`);
        }
      }
    })
  ],
  
  // Fast resolve for development
  resolve: {
    symlinks: false,
    cacheWithContext: false
  },
  
  // Optimized file watching
  watchOptions: {
    ignored: [
      path.resolve(__dirname, 'node_modules'),
      '**/.git',
      '**/dist',
      '**/build'
    ],
    aggregateTimeout: 100
  },
  
  // Development-friendly output
  output: {
    pathinfo: true,
    filename: '[name].js',
    chunkFilename: '[name].chunk.js'
  }
};

// Multi-environment development setup
const createDevConfig = (env) => {
  const isDevelopment = env === 'development';
  const isTest = env === 'test';
  
  return {
    mode: isDevelopment ? 'development' : 'production',
    
    cache: isDevelopment ? {
      type: 'memory',
      maxGenerations: 1
    } : false,
    
    devtool: isDevelopment 
      ? 'eval-source-map'
      : isTest 
        ? 'inline-source-map'
        : 'source-map',
    
    plugins: [
      ...(isDevelopment ? [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.ProgressPlugin()
      ] : []),
      
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(env),
        '__DEV__': isDevelopment,
        '__TEST__': isTest
      })
    ],
    
    optimization: {
      minimize: !isDevelopment && !isTest,
      removeAvailableModules: !isDevelopment,
      concatenateModules: !isDevelopment && !isTest
    }
  };
};

module.exports = (env, argv) => {
  return createDevConfig(env.NODE_ENV || 'development');
};

Common Types

interface Compiler {
  /** Webpack configuration options */
  options: WebpackOptionsNormalized;
  
  /** Compiler hooks for plugin integration */
  hooks: CompilerHooks;
  
  /** Start watching for file changes */
  watch(
    watchOptions: WatchOptions,
    handler: (err: Error | null, stats?: Stats) => void
  ): Watching;
  
  /** Run single build */
  run(callback: (err: Error | null, stats?: Stats) => void): void;
  
  /** Close compiler and cleanup */
  close(callback: (err?: Error) => void): void;
}

interface Compilation {
  /** Parent compiler */
  compiler: Compiler;
  
  /** Compilation errors */
  errors: WebpackError[];
  
  /** Compilation warnings */
  warnings: WebpackError[];
  
  /** Generated assets */
  assets: Record<string, Asset>;
  
  /** Get logger for compilation */
  getLogger(name: string): WebpackLogger;
}

interface WebpackLogger {
  /** Log error message */
  error(...args: any[]): void;
  
  /** Log warning message */
  warn(...args: any[]): void;
  
  /** Log info message */
  info(...args: any[]): void;
  
  /** Log debug message */
  log(...args: any[]): void;
  
  /** Log debug message */
  debug(...args: any[]): void;
  
  /** Log trace message */
  trace(...args: any[]): void;
  
  /** Get child logger */
  getChildLogger(name: string): WebpackLogger;
}

type WebpackPluginInstance = {
  apply(compiler: Compiler): void;
};

interface CacheOptions {
  type: 'memory' | 'filesystem';
  name?: string;
  version?: string;
  cacheDirectory?: string;
  buildDependencies?: {
    config?: string[];
    defaultWebpack?: string[];
  };
}

Development Workflow Patterns

Hot Module Replacement Workflow

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    hot: true,
    port: 3000
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

// src/index.js - HMR setup
import { render } from './app';

render();

if (module.hot) {
  module.hot.accept('./app', () => {
    const { render } = require('./app');
    render();
  });
}

Development Server with Proxy

module.exports = {
  devServer: {
    hot: true,
    proxy: {
      '/api': 'http://localhost:8080',
      '/ws': {
        target: 'ws://localhost:8080',
        ws: true
      }
    },
    historyApiFallback: true,
    client: {
      overlay: {
        errors: true,
        warnings: false
      }
    }
  }
};

Multi-Configuration Development

module.exports = [
  // Client configuration
  {
    name: 'client',
    target: 'web',
    entry: './src/client/index.js',
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ]
  },
  // Server configuration
  {
    name: 'server',
    target: 'node',
    entry: './src/server/index.js',
    plugins: [
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/]
      })
    ]
  }
];

The development tools ecosystem in webpack provides everything needed for efficient development workflows, from basic file watching to advanced hot module replacement and comprehensive debugging capabilities.

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