{"id":18008,"library":"webpack-middleware","title":"Webpack Middleware for Express/Browsersync","description":"webpack-middleware is a wrapper that enables running the Webpack compiler as a middleware for Connect-compatible servers like Express.js or Browsersync. It serves compiled assets from memory, offering faster rebuilds during development without writing files to disk. This specific package, at version 1.5.1, is a fork of `webpack-dev-middleware` designed to better support isomorphic (mixed web/Node.js) bundles. However, it has not been updated since 2016 and is tied to Webpack versions less than 3, making it incompatible with modern Webpack 4 or 5. Users should generally prefer the actively maintained `webpack-dev-middleware` for current projects.","status":"abandoned","version":"1.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/kriasoft/webpack-middleware","tags":["javascript"],"install":[{"cmd":"npm install webpack-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-middleware","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for compiling assets. Requires Webpack < 3.","package":"webpack","optional":false},{"reason":"Used in quickstart example for live reloading and proxying.","package":"browser-sync","optional":true}],"imports":[{"note":"While the quickstart uses `import`, CommonJS `require` was standard for Node.js 0.6+ when this package was current. The `import` syntax would require a transpiler like Babel. Use `require` for older Node.js environments.","wrong":"const webpack = require('webpack');","symbol":"webpack","correct":"import webpack from 'webpack';"},{"note":"For `webpack-middleware` v1, the primary export is a function. In older CommonJS environments, `require('webpack-middleware')` directly returns the function.","wrong":"const webpackMiddleware = require('webpack-middleware').default; // Incorrect default import","symbol":"webpackMiddleware","correct":"import webpackMiddleware from 'webpack-middleware';"},{"note":"These are methods of the *instance* returned by `webpackMiddleware(compiler)`, not static exports from the module itself.","wrong":"webpackMiddleware.close(); // Not a static method","symbol":"close, invalidate, waitUntilValid","correct":"const instance = webpackMiddleware(compiler); instance.close();"}],"quickstart":{"code":"import webpack from 'webpack';\nimport webpackMiddleware from 'webpack-middleware';\nimport webpackConfig from './webpack.config.js'; // Assuming this exports Webpack configurations\nimport { create as createBrowserSync } from 'browser-sync'; // Using named import for modern BrowserSync\n\n// A placeholder for a node runner in a real isomorphic app\nconst runNode = (path) => new Promise(resolve => {\n  console.log(`Simulating launching Node.js app at ${path}`);\n  setTimeout(() => resolve(), 500); // Simulate async launch\n});\n\nconst compiler = webpack(webpackConfig);\n// Launch Webpack compiler in watch mode via middleware\nconst wpMiddleware = webpackMiddleware(compiler, {\n  publicPath: '/', // Or your webpack output.publicPath\n  stats: {\n    colors: true,\n    preset: 'minimal' // Keep console output clean\n  }\n});\n\n// Launch Node.js app in a child process, then Browsersync\nrunNode('./build/server.js').then(() => {\n  const bs = createBrowserSync();\n  bs.init({\n    proxy: {\n      target: 'http://localhost:3000', // <- where Node.js app is running\n      middleware: [wpMiddleware]\n    },\n    open: false // Prevent browser from opening automatically for this example\n  });\n  console.log('Browsersync initialized with Webpack middleware.');\n\n  // Example of using advanced API after a delay\n  setTimeout(() => {\n    console.log('Invalidating Webpack compiler...');\n    wpMiddleware.invalidate(); // Trigger a recompile\n  }, 5000);\n\n}, (err) => console.error('Failed to launch Node.js app:', err));","lang":"javascript","description":"This quickstart demonstrates how to integrate `webpack-middleware` with Browsersync to serve Webpack bundles from memory and proxy requests to a Node.js application, suitable for isomorphic development."},"warnings":[{"fix":"Migrate to `webpack-dev-middleware`. This involves changing the package name and potentially updating configuration options, as the APIs may have diverged slightly over time. `webpack-dev-middleware` has continuous updates and supports recent Webpack versions.","message":"This package (`webpack-middleware`) is deprecated and effectively abandoned. It has not been updated since 2016 (v1.5.1) and is incompatible with Webpack versions 3.x, 4.x, or 5.x. Modern applications *must* use `webpack-dev-middleware` instead.","severity":"breaking","affected_versions":">=1.5.1"},{"fix":"Given the abandonment of this package, there is no direct fix. The only solution is to migrate to `webpack-dev-middleware` which has addressed these issues in later versions.","message":"The primary `webpack-dev-middleware` (from which this package was forked) had security vulnerabilities in older versions, specifically around DNS Rebinding and leaking compiled source code due to `Access-Control-Allow-Origin: *` headers. It's highly probable that this `webpack-middleware` fork shares these vulnerabilities.","severity":"gotcha","affected_versions":"<=1.5.1"},{"fix":"Either downgrade your Webpack installation to a compatible v1 or v2 version (not recommended for new projects), or switch to the actively maintained `webpack-dev-middleware` which supports modern Webpack versions.","message":"This package strictly requires `webpack` versions between 1.0.0 and 3.0.0 (exclusive of 3.0.0) as a peer dependency. Installing with Webpack 3.x, 4.x, 5.x, or newer will result in peer dependency warnings or runtime errors due to API changes.","severity":"breaking","affected_versions":">=1.5.1"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Install webpack locally: `npm install webpack`","cause":"Webpack is a peer dependency but was not installed in the project.","error":"Error: Cannot find module 'webpack'"},{"fix":"Ensure your server framework is Connect-compatible (e.g., Express.js, Koa via `koa-connect`, Browsersync) or correctly applies the middleware. The `webpack-dev-middleware` documentation (which this package is based on) provides examples for various frameworks.","cause":"The middleware is being used with a server framework that is not Connect-compatible (e.g., a vanilla Node.js http server without an `app.use` method).","error":"Uncaught TypeError: app.use is not a function"},{"fix":"This package is obsolete for modern Webpack. Uninstall `webpack-middleware` and `webpack-dev-middleware` (if also present) and install `webpack-dev-middleware` instead. `npm uninstall webpack-middleware; npm install webpack-dev-middleware`.","cause":"You have a version of webpack (e.g., v3, v4, v5) installed that is outside the supported range for this package.","error":"webpack-middleware peer dependency webpack@'>=1.0.0 <3' not met."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}