or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdframeworks.mdindex.mdmiddleware.md
tile.json

tessl/npm-webpack-dev-middleware

Express-style development middleware for webpack that serves files from memory and handles compilation in watch mode

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/webpack-dev-middleware@7.4.x

To install, run

npx @tessl/cli install tessl/npm-webpack-dev-middleware@7.4.0

index.mddocs/

webpack-dev-middleware

webpack-dev-middleware is an Express-style development middleware for webpack that serves files directly from memory without writing to disk. It enables development workflows by handling webpack bundles in memory, automatically delaying requests until compilation completes when files change in watch mode, and supporting hot module reload (HMR).

Package Information

  • Package Name: webpack-dev-middleware
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install webpack-dev-middleware --save-dev

Core Imports

const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");

For ES modules:

import webpack from "webpack";
import webpackDevMiddleware from "webpack-dev-middleware";

Basic Usage

const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");
const express = require("express");

// Create webpack compiler
const compiler = webpack({
  // webpack configuration
  entry: "./src/index.js",
  output: {
    path: "/",
    filename: "bundle.js",
  },
});

// Create Express app and use middleware
const app = express();
app.use(webpackDevMiddleware(compiler, {
  publicPath: "/",
  stats: "minimal",
}));

app.listen(3000);

Architecture

webpack-dev-middleware is built around several key components:

  • Middleware Factory: Main function that creates Express-compatible middleware with additional API methods
  • Framework Wrappers: Built-in adapters for Hapi.js, Koa.js, and Hono frameworks
  • Memory File System: Uses memfs to serve files from memory instead of disk for faster development
  • Webpack Integration: Direct integration with webpack compiler instances and watch mode
  • HTTP Compatibility: Compatible with Express, Connect, Fastify, and raw Node.js HTTP servers

Capabilities

Core Middleware

Primary middleware functionality for serving webpack bundles from memory with Express-style interface.

function webpackDevMiddleware<RequestInternal, ResponseInternal>(
  compiler: Compiler | MultiCompiler,
  options?: Options<RequestInternal, ResponseInternal>
): API<RequestInternal, ResponseInternal>;

interface API<RequestInternal, ResponseInternal> extends Middleware<RequestInternal, ResponseInternal> {
  getFilenameFromUrl(url: string, extra?: Extra): string | undefined;
  waitUntilValid(callback?: Callback): void;
  invalidate(callback?: Callback): void;
  close(callback?: (err: Error | null | undefined) => void): void;
  context: Context<RequestInternal, ResponseInternal>;
}

type Middleware<RequestInternal, ResponseInternal> = (
  req: RequestInternal,
  res: ResponseInternal,
  next: NextFunction
) => Promise<void>;

Core Middleware

Framework Wrappers

Framework-specific middleware adapters for Hapi.js, Koa.js, and Hono that provide native integration patterns.

// Hapi.js plugin wrapper
function hapiWrapper<HapiServer, HapiOptionsInternal>(): HapiPlugin<HapiServer, HapiOptionsInternal>;

// Koa.js middleware wrapper  
function koaWrapper<RequestInternal, ResponseInternal>(
  compiler: Compiler | MultiCompiler,
  options?: Options<RequestInternal, ResponseInternal>
): (ctx: any, next: Function) => Promise<void> | void;

// Hono middleware wrapper
function honoWrapper<RequestInternal, ResponseInternal>(
  compiler: Compiler | MultiCompiler, 
  options?: Options<RequestInternal, ResponseInternal>
): (ctx: any, next: Function) => Promise<void> | void;

Framework Integration

Configuration Options

Comprehensive configuration system for controlling file serving, caching, HTTP headers, and development features.

interface Options<RequestInternal, ResponseInternal> {
  mimeTypes?: { [key: string]: string };
  mimeTypeDefault?: string;
  writeToDisk?: boolean | ((targetPath: string) => boolean);
  methods?: string[];
  headers?: Headers<RequestInternal, ResponseInternal>;
  publicPath?: string | Function;
  stats?: Configuration["stats"];
  serverSideRender?: boolean;
  outputFileSystem?: OutputFileSystem;
  index?: boolean | string;
  modifyResponseData?: ModifyResponseData<RequestInternal, ResponseInternal>;
  etag?: "weak" | "strong";
  lastModified?: boolean;
  cacheControl?: boolean | number | string | CacheControlObject;
  cacheImmutable?: boolean;
}

Configuration