{"id":18765,"library":"rsbuild-dev-middleware","title":"webpack-dev-middleware","description":"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.","status":"active","version":"0.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/chenjiahan/rsbuild-dev-middleware","tags":["javascript","webpack","middleware","development","typescript"],"install":[{"cmd":"npm install rsbuild-dev-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add rsbuild-dev-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add rsbuild-dev-middleware","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for compilation and bundling","package":"webpack","optional":false}],"imports":[{"note":"Package uses default export; in CommonJS you must use middleware = require('webpack-dev-middleware') directly.","wrong":"const middleware = require('webpack-dev-middleware').default;","symbol":"default","correct":"import middleware from 'webpack-dev-middleware';"},{"note":"Named export is available; CJS destructuring also works but ensure you are not using .default.","wrong":"const { getFilenameFromUrl } = require('webpack-dev-middleware');","symbol":"getFilenameFromUrl","correct":"import { getFilenameFromUrl } from 'webpack-dev-middleware';"},{"note":"This is a named utility function, not a default export.","wrong":"import setupOutputFileSystem from 'webpack-dev-middleware';","symbol":"setupOutputFileSystem","correct":"import { setupOutputFileSystem } from 'webpack-dev-middleware';"}],"quickstart":{"code":"import webpack from 'webpack';\nimport middleware from 'webpack-dev-middleware';\nimport express from 'express';\n\nconst compiler = webpack({\n  // your webpack config here\n  entry: './src/index.js',\n  output: { path: '/', filename: 'bundle.js' },\n});\n\nconst app = express();\n\napp.use(\n  middleware(compiler, {\n    publicPath: '/',\n    writeToDisk: false, // default\n  })\n);\n\napp.listen(3000, () => console.log('Server running on http://localhost:3000'));","lang":"typescript","description":"Sets up webpack-dev-middleware with Express, serving in-memory bundled files on the root path without writing to disk."},"warnings":[{"fix":"Upgrade Node.js to v18.12.0 or later.","message":"Node.js version requirement: v0.3.0 requires Node >= 18.12.0, dropping support for older versions.","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"If you intended to use the original, revert to 'webpack-dev-middleware' from npm.","message":"The package is a fork/rename; the original webpack-dev-middleware is still maintained. Ensure you use the correct package name.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Set publicPath explicitly in options when creating middleware or restart the server.","message":"The publicPath option is not directly modifiable after middleware creation; changes to webpack config output.publicPath are not reflected until re-creation.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For file-based serving, consider using webpack-dev-server or manual file watching.","message":"Using writeToDisk: true may cause stale files if webpack recompiles and you rely only on disk writes; the middleware still serves from memory.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Adjust any custom log parsing; see Rsbuild logger documentation.","message":"In v0.2.0 logger style unified with Rsbuild – custom log format may differ from previous versions.","severity":"breaking","affected_versions":">=0.2.0 <0.3.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install webpack@^5' to add webpack as a dependency.","cause":"webpack is a peer dependency but not installed.","error":"Cannot find module 'webpack'"},{"fix":"Ensure correct import: for ESM use `import middleware from 'webpack-dev-middleware'`; for CJS use `const middleware = require('webpack-dev-middleware')`.","cause":"Incorrect import: using default import incorrectly or destructuring wrong export.","error":"TypeError: middleware is not a function"},{"fix":"Convert to ESM (type: module in package.json) or use dynamic import: `const middleware = await import('webpack-dev-middleware')`.","cause":"Package is ESM-only; calling require() on it in a CommonJS module without dynamic import.","error":"Error: require() of ES Module not supported"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}