CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-webpack-dev-middleware

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

—

Pending
Overview
Eval results
Files

frameworks.mddocs/

Framework Integration

webpack-dev-middleware provides built-in adapters for popular Node.js frameworks beyond Express, enabling native integration patterns for Hapi.js, Koa.js, and Hono.

Hapi.js Integration

hapiWrapper

function hapiWrapper<HapiServer, HapiOptionsInternal>(): HapiPlugin<HapiServer, HapiOptionsInternal>;

Creates a Hapi.js plugin for webpack-dev-middleware integration.

Returns: Hapi plugin object with registration method

Usage Example

const Hapi = require("@hapi/hapi");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");

const server = Hapi.server({ port: 3000 });

await server.register({
  plugin: webpackDevMiddleware.hapiWrapper(),
  options: {
    compiler: webpack(webpackConfig),
    publicPath: "/assets/",
    stats: "minimal"
  }
});

// Access middleware via server decoration
server.webpackDevMiddleware.waitUntilValid(() => {
  console.log("Webpack ready");
});

await server.start();

Koa.js Integration

koaWrapper

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

Creates Koa.js compatible middleware that adapts request/response handling.

Parameters:

  • compiler: Webpack compiler instance
  • options: Optional middleware configuration

Returns: Koa middleware function with devMiddleware property

Usage Example

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

const app = new Koa();
const compiler = webpack(webpackConfig);

const middleware = webpackDevMiddleware.koaWrapper(compiler, {
  publicPath: "/assets/",
  stats: "minimal"
});

app.use(middleware);

// Access underlying middleware
middleware.devMiddleware.waitUntilValid(() => {
  console.log("Webpack ready");
});

app.listen(3000);

Hono Integration

honoWrapper

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

Creates Hono framework compatible middleware with proper context handling.

Parameters:

  • compiler: Webpack compiler instance
  • options: Optional middleware configuration

Returns: Hono middleware function with devMiddleware property

Usage Example

import { Hono } from "hono";
import { serve } from "@hono/node-server";
import webpack from "webpack";
import webpackDevMiddleware from "webpack-dev-middleware";

const app = new Hono();
const compiler = webpack(webpackConfig);

const middleware = webpackDevMiddleware.honoWrapper(compiler, {
  publicPath: "/assets/",
  stats: "minimal"
});

app.use("*", middleware);

// Access underlying middleware
middleware.devMiddleware.waitUntilValid(() => {
  console.log("Webpack ready");
});

serve({ fetch: app.fetch, port: 3000 });

Type Definitions

Plugin Interfaces

interface HapiPlugin<S, O> {
  pkg: { name: string };
  multiple: boolean;
  register: (server: S, options: O) => void | Promise<void>;
}

interface HapiOptions extends Options {
  compiler: Compiler | MultiCompiler;
}

Framework-Specific Properties

// Koa middleware interface with devMiddleware property
interface KoaMiddleware<RequestInternal, ResponseInternal> {
  devMiddleware: API<RequestInternal, ResponseInternal>;
  (ctx: any, next: Function): Promise<void> | void;
}

// Hono middleware interface with devMiddleware property  
interface HonoMiddleware<RequestInternal, ResponseInternal> {
  devMiddleware: API<RequestInternal, ResponseInternal>;
  (ctx: any, next: Function): Promise<void> | void;
}

Framework Compatibility

Express and Connect

Direct middleware usage (no wrapper needed):

const express = require("express");
const connect = require("connect");

// Express
app.use(webpackDevMiddleware(compiler, options));

// Connect
const app = connect();
app.use(webpackDevMiddleware(compiler, options));

Fastify

Via Express compatibility plugin:

const fastify = require("fastify")();

await fastify.register(require("@fastify/express"));
fastify.use(webpackDevMiddleware(compiler, options));

Raw Node.js HTTP

Direct integration with Node.js HTTP server:

const http = require("http");
const middleware = webpackDevMiddleware(compiler, options);

const server = http.createServer((req, res) => {
  middleware(req, res, (err) => {
    if (err) {
      res.statusCode = 500;
      res.end("Internal Server Error");
    } else {
      res.statusCode = 404;
      res.end("Not Found");
    }
  });
});

Error Handling

All framework wrappers include proper error handling:

// Errors are passed to framework-specific error handlers
try {
  await middleware(ctx, next);
} catch (err) {
  // Framework-appropriate error response
  ctx.status = err.statusCode || err.status || 500;
  ctx.body = { message: err.message };
}

Context Integration

Framework wrappers properly integrate with each framework's request/response context:

  • Hapi: Decorates server with webpackDevMiddleware property
  • Koa: Adapts ctx.req/ctx.res and manages ctx.status/ctx.body
  • Hono: Integrates with Hono's context object and response handling

Install with Tessl CLI

npx tessl i tessl/npm-webpack-dev-middleware

docs

configuration.md

frameworks.md

index.md

middleware.md

tile.json