{"id":17481,"library":"webpack-dev-middleware","title":"Webpack Development Middleware","description":"webpack-dev-middleware is an Express-style development middleware for integrating webpack into a custom Node.js HTTP server environment. It serves the bundles emitted from webpack directly from memory, avoiding disk I/O during development, which significantly speeds up development workflows. The current stable version is 8.0.3, with minor and patch releases occurring frequently as new features are added and bugs are fixed, often driven by updates to webpack itself or compatibility with alternative bundlers like Rspack. Its key differentiators include in-memory file handling, delaying requests until compilation is complete, and robust support for Hot Module Replacement (HMR). This middleware is strictly for development environments and should not be used in production.","status":"active","version":"8.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/webpack/webpack-dev-middleware","tags":["javascript","webpack","middleware","development","typescript"],"install":[{"cmd":"npm install webpack-dev-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-dev-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-dev-middleware","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core bundler dependency for compilation and asset management.","package":"webpack","optional":false}],"imports":[{"note":"While CommonJS `require` is shown in the README, modern Node.js applications and TypeScript projects should prefer ESM imports. The library ships with TypeScript types.","wrong":"const middleware = require('webpack-dev-middleware');","symbol":"middleware","correct":"import middleware from 'webpack-dev-middleware';"},{"note":"Importing the webpack core library itself. Ensure you use the correct import style for your project's module system.","wrong":"const webpack = require('webpack');","symbol":"webpack","correct":"import webpack from 'webpack';"},{"note":"webpack-dev-middleware is designed to integrate with Express-compatible middleware systems. The `express` package is a common peer in such setups.","symbol":"Express Application","correct":"import express from 'express';\nconst app = express();"}],"quickstart":{"code":"import express from 'express';\nimport webpack from 'webpack';\nimport middleware from 'webpack-dev-middleware';\n\nconst compiler = webpack({\n  mode: 'development',\n  entry: './src/index.js',\n  output: {\n    path: '/',\n    filename: 'bundle.js',\n  },\n});\n\nconst app = express();\n\napp.use(\n  middleware(compiler, {\n    publicPath: '/',\n    // logLevel: 'warn', // Consider setting this for less verbose output\n    // writeToDisk: false, // Files are served from memory by default\n  }),\n);\n\napp.listen(3000, () => {\n  console.log('Webpack dev middleware example app listening on port 3000!');\n  console.log('Access your app at http://localhost:3000/bundle.js');\n});\n","lang":"typescript","description":"Demonstrates setting up webpack-dev-middleware with an Express application to serve webpack-compiled assets from memory."},"warnings":[{"fix":"Update any custom logic interacting with `getFilenameFromUrl` to use `await` or `.then()` and destructure the returned object for `filename` and other properties.","message":"The `getFilenameFromUrl` function (if used directly) changed from synchronous to asynchronous, returning a Promise. Its return value also changed to an object containing `filename`, `extra` (with `stats` and `outputFileSystem`).","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Ensure webpack-dev-middleware is only included as a `devDependency` and never deployed to production. Use static asset serving for production builds.","message":"webpack-dev-middleware is strictly for development. Using it in production environments will expose development-specific assets and configuration, and it is not optimized for performance or security in a production context.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Upgrade your Node.js environment to version 20.9.0 or newer. Check your `engines` field in `package.json` if you enforce specific Node.js versions.","message":"Node.js engine requirement has been updated to `^20.9.0`. Older Node.js versions are no longer officially supported.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Upgrade to `webpack-dev-middleware@8.0.3` or newer to ensure compatibility with `connect-history-api-fallback` and similar URL-modifying middleware.","message":"When combining with other middleware like `connect-history-api-fallback`, ensure `webpack-dev-middleware` respects modifications to `req.url` by upstream middleware. Older versions might not correctly handle URL rewrites.","severity":"gotcha","affected_versions":"<8.0.3"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Install webpack: `npm install webpack --save-dev` or `yarn add webpack --dev`.","cause":"webpack is a peer dependency and must be installed separately.","error":"Error: Cannot find module 'webpack'"},{"fix":"Ensure `app` is initialized correctly, e.g., `const express = require('express'); const app = express();` or a compatible HTTP server framework.","cause":"`app` is not a valid Express-like application instance.","error":"TypeError: app.use is not a function"},{"fix":"Refactor code to `await` the result of `getFilenameFromUrl` and handle the new object structure, e.g., `const { filename } = await getFilenameFromUrl(...)`.","cause":"Attempting to use the result of `getFilenameFromUrl` (or similar asynchronous API) as if it were synchronous after upgrading to v8.","error":"Promise { <pending> }"}],"ecosystem":"npm","meta_description":null}