0
# webpack-dev-middleware
1

2
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).
3

4
## Package Information
5

6
- **Package Name**: webpack-dev-middleware
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install webpack-dev-middleware --save-dev`
10

11
## Core Imports
12

13
```javascript
14
const webpack = require("webpack");
15
const webpackDevMiddleware = require("webpack-dev-middleware");
16
```
17

18
For ES modules:
19

20
```javascript
21
import webpack from "webpack";
22
import webpackDevMiddleware from "webpack-dev-middleware";
23
```
24

25
## Basic Usage
26

27
```javascript
28
const webpack = require("webpack");
29
const webpackDevMiddleware = require("webpack-dev-middleware");
30
const express = require("express");
31

32
// Create webpack compiler
33
const compiler = webpack({
34
  // webpack configuration
35
  entry: "./src/index.js",
36
  output: {
37
    path: "/",
38
    filename: "bundle.js",
39
  },
40
});
41

42
// Create Express app and use middleware
43
const app = express();
44
app.use(webpackDevMiddleware(compiler, {
45
  publicPath: "/",
46
  stats: "minimal",
47
}));
48

49
app.listen(3000);
50
```
51

52
## Architecture
53

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

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

62
## Capabilities
63

64
### Core Middleware
65

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

68
```javascript { .api }
69
function webpackDevMiddleware<RequestInternal, ResponseInternal>(
70
  compiler: Compiler | MultiCompiler,
71
  options?: Options<RequestInternal, ResponseInternal>
72
): API<RequestInternal, ResponseInternal>;
73

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

82
type Middleware<RequestInternal, ResponseInternal> = (
83
  req: RequestInternal,
84
  res: ResponseInternal,
85
  next: NextFunction
86
) => Promise<void>;
87
```
88

89
[Core Middleware](./middleware.md)
90

91
### Framework Wrappers
92

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

95
```javascript { .api }
96
// Hapi.js plugin wrapper
97
function hapiWrapper<HapiServer, HapiOptionsInternal>(): HapiPlugin<HapiServer, HapiOptionsInternal>;
98

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

105
// Hono middleware wrapper
106
function honoWrapper<RequestInternal, ResponseInternal>(
107
  compiler: Compiler | MultiCompiler, 
108
  options?: Options<RequestInternal, ResponseInternal>
109
): (ctx: any, next: Function) => Promise<void> | void;
110
```
111

112
[Framework Integration](./frameworks.md)
113

114
### Configuration Options
115

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

118
```javascript { .api }
119
interface Options<RequestInternal, ResponseInternal> {
120
  mimeTypes?: { [key: string]: string };
121
  mimeTypeDefault?: string;
122
  writeToDisk?: boolean | ((targetPath: string) => boolean);
123
  methods?: string[];
124
  headers?: Headers<RequestInternal, ResponseInternal>;
125
  publicPath?: string | Function;
126
  stats?: Configuration["stats"];
127
  serverSideRender?: boolean;
128
  outputFileSystem?: OutputFileSystem;
129
  index?: boolean | string;
130
  modifyResponseData?: ModifyResponseData<RequestInternal, ResponseInternal>;
131
  etag?: "weak" | "strong";
132
  lastModified?: boolean;
133
  cacheControl?: boolean | number | string | CacheControlObject;
134
  cacheImmutable?: boolean;
135
}
136
```
137

138
[Configuration](./configuration.md)