tessl/npm-webpack-dev-middleware
Express-style development middleware for webpack that serves files from memory and handles compilation in watch mode
—
configuration.mddocs/
Configuration Options
webpack-dev-middleware provides comprehensive configuration options for controlling file serving behavior, HTTP headers, caching, and development features.
Options Interface
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;
}File Serving Options
mimeTypes
mimeTypes?: { [key: string]: string };Custom MIME type mappings for file extensions.
Default: undefined
Example:
{
mimeTypes: {
".custom": "application/x-custom",
".special": "text/special"
}
}mimeTypeDefault
mimeTypeDefault?: string;Default MIME type when content type cannot be determined.
Default: undefined
Example:
{
mimeTypeDefault: "application/octet-stream"
}index
index?: boolean | string;Controls index file serving for directory requests.
Default: "index.html"
Options:
false: Disable index servingtrue: Use default "index.html"string: Custom index filename
Example:
{
index: "main.html" // Serve main.html for directory requests
}publicPath
publicPath?: string | Function;The public URL path where files are served.
Default: Webpack configuration output.publicPath
Example:
{
publicPath: "/assets/" // Serve files under /assets/ path
}HTTP Configuration
methods
methods?: string[];HTTP methods accepted by the middleware.
Default: ["GET", "HEAD"]
Example:
{
methods: ["GET", "HEAD", "POST"]
}headers
headers?: Headers<RequestInternal, ResponseInternal>;
type Headers<RequestInternal, ResponseInternal> =
| NormalizedHeaders
| ((req: RequestInternal, res: ResponseInternal, context: Context) => void | undefined | NormalizedHeaders)
| undefined;
type NormalizedHeaders =
| Record<string, string | number>
| Array<{ key: string; value: number | string }>;Custom HTTP headers for responses.
Default: undefined
Examples:
// Object format
{
headers: {
"X-Custom-Header": "value",
"Cache-Control": "no-cache"
}
}
// Array format
{
headers: [
{ key: "X-Custom-Header", value: "value" },
{ key: "Cache-Control", value: "no-cache" }
]
}
// Function format
{
headers: (req, res, context) => {
if (context.stats && context.stats.hasErrors()) {
return { "X-Build-Status": "error" };
}
return { "X-Build-Status": "success" };
}
}Caching Options
etag
etag?: "weak" | "strong";Enable and configure ETag generation.
Default: undefined (disabled)
Example:
{
etag: "weak" // Generate weak ETags
}lastModified
lastModified?: boolean;Enable Last-Modified headers based on file modification time.
Default: undefined (disabled)
Example:
{
lastModified: true
}cacheControl
cacheControl?: boolean | number | string | CacheControlObject;
interface CacheControlObject {
maxAge?: number;
immutable?: boolean;
}Configure Cache-Control header.
Default: undefined
Examples:
// Boolean
{ cacheControl: false } // Disable caching
// Number (max-age in seconds)
{ cacheControl: 3600 } // Cache for 1 hour
// String
{ cacheControl: "no-cache, no-store" }
// Object
{
cacheControl: {
maxAge: 86400, // 24 hours
immutable: true
}
}cacheImmutable
cacheImmutable?: boolean;Enable immutable caching for assets with hashes in filenames.
Default: undefined
Example:
{
cacheImmutable: true // Add immutable directive for hashed assets
}Development Options
writeToDisk
writeToDisk?: boolean | ((targetPath: string) => boolean);Write files to disk in addition to serving from memory.
Default: false
Examples:
// Write all files to disk
{ writeToDisk: true }
// Selective file writing
{
writeToDisk: (targetPath) => {
return targetPath.endsWith('.html'); // Only write HTML files
}
}serverSideRender
serverSideRender?: boolean;Enable server-side rendering mode (disables serving static files).
Default: undefined
Example:
{
serverSideRender: true // Only provide stats, don't serve files
}stats
stats?: Configuration["stats"];Webpack stats configuration for build output.
Default: Webpack configuration stats
Examples:
// Preset
{ stats: "minimal" }
// Boolean
{ stats: false } // Disable stats output
// Object
{
stats: {
colors: true,
modules: false,
chunks: false
}
}Advanced Options
outputFileSystem
outputFileSystem?: OutputFileSystem;Custom file system for webpack output.
Default: memfs (memory file system)
Example:
const fs = require("fs");
{
outputFileSystem: fs // Use real file system
}modifyResponseData
modifyResponseData?: ModifyResponseData<RequestInternal, ResponseInternal>;
type ModifyResponseData<RequestInternal, ResponseInternal> = (
req: RequestInternal,
res: ResponseInternal,
data: Buffer | ReadStream,
byteLength: number
) => ResponseData;
interface ResponseData {
data: Buffer | ReadStream;
byteLength: number;
}Callback to modify response data before sending.
Example:
{
modifyResponseData: (req, res, data, byteLength) => {
if (req.url.endsWith('.js')) {
// Add source map comment
const modified = Buffer.concat([
data,
Buffer.from('\n//# sourceMappingURL=bundle.js.map')
]);
return {
data: modified,
byteLength: modified.length
};
}
return { data, byteLength };
}
}Configuration Examples
Production-like Development
{
publicPath: "/assets/",
stats: "errors-warnings",
headers: {
"Cache-Control": "no-cache"
},
etag: "strong",
lastModified: true
}Hot Module Replacement Setup
{
publicPath: "/",
stats: "minimal",
headers: {
"Access-Control-Allow-Origin": "*"
},
writeToDisk: false
}Custom File System Integration
{
outputFileSystem: customMemoryFS,
writeToDisk: (targetPath) => {
return targetPath.includes('critical');
},
modifyResponseData: (req, res, data) => {
// Transform data before serving
return { data: transformData(data), byteLength: data.length };
}
}Install with Tessl CLI
npx tessl i tessl/npm-webpack-dev-middleware