webpack-dev-middleware

0.3.0 verified Sat Apr 25 auth: no javascript

This is an express-style development middleware for webpack that serves files emitted from webpack in memory (not written to disk) and delays requests until compilation completes. This package is a direct fork/rename of webpack-dev-middleware (the original) but maintained under the Rsbuild project. Version 0.3.0 supports Node >= 18.12.0, webpack 5 as peer dependency, and ships TypeScript types. Unlike webpack-dev-server it works with custom Node.js HTTP servers like Express. Release cadence is moderate with breaking changes possible before 1.0. Key differentiator: provides fine-grained control over serving webpack assets in custom server setups without extra overhead.

Common errors

error Cannot find module 'webpack' ↓

cause webpack is a peer dependency but not installed.

fix

Run 'npm install webpack@^5' to add webpack as a dependency.

error TypeError: middleware is not a function ↓

cause Incorrect import: using default import incorrectly or destructuring wrong export.

fix

Ensure correct import: for ESM use import middleware from 'webpack-dev-middleware'; for CJS use const middleware = require('webpack-dev-middleware').

error Error: require() of ES Module not supported ↓

cause Package is ESM-only; calling require() on it in a CommonJS module without dynamic import.

fix

Convert to ESM (type: module in package.json) or use dynamic import: const middleware = await import('webpack-dev-middleware').

Warnings

breaking Node.js version requirement: v0.3.0 requires Node >= 18.12.0, dropping support for older versions. ↓

fix Upgrade Node.js to v18.12.0 or later.

deprecated The package is a fork/rename; the original webpack-dev-middleware is still maintained. Ensure you use the correct package name. ↓

fix If you intended to use the original, revert to 'webpack-dev-middleware' from npm.

gotcha The publicPath option is not directly modifiable after middleware creation; changes to webpack config output.publicPath are not reflected until re-creation. ↓

fix Set publicPath explicitly in options when creating middleware or restart the server.

gotcha Using writeToDisk: true may cause stale files if webpack recompiles and you rely only on disk writes; the middleware still serves from memory. ↓

fix For file-based serving, consider using webpack-dev-server or manual file watching.

breaking In v0.2.0 logger style unified with Rsbuild – custom log format may differ from previous versions. ↓

fix Adjust any custom log parsing; see Rsbuild logger documentation.

Install

npm install rsbuild-dev-middleware

yarn add rsbuild-dev-middleware

pnpm add rsbuild-dev-middleware

Imports

default
wrong
```
const middleware = require('webpack-dev-middleware').default;
```
correct
```
import middleware from 'webpack-dev-middleware';
```
Package uses default export; in CommonJS you must use middleware = require('webpack-dev-middleware') directly.

getFilenameFromUrl

wrong

const { getFilenameFromUrl } = require('webpack-dev-middleware');

correct

import { getFilenameFromUrl } from 'webpack-dev-middleware';

Named export is available; CJS destructuring also works but ensure you are not using .default.

setupOutputFileSystem

wrong

import setupOutputFileSystem from 'webpack-dev-middleware';

correct

import { setupOutputFileSystem } from 'webpack-dev-middleware';

This is a named utility function, not a default export.

Quickstart

Sets up webpack-dev-middleware with Express, serving in-memory bundled files on the root path without writing to disk.

import webpack from 'webpack';
import middleware from 'webpack-dev-middleware';
import express from 'express';

const compiler = webpack({
  // your webpack config here
  entry: './src/index.js',
  output: { path: '/', filename: 'bundle.js' },
});

const app = express();

app.use(
  middleware(compiler, {
    publicPath: '/',
    writeToDisk: false, // default
  })
);

app.listen(3000, () => console.log('Server running on http://localhost:3000'));