{"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,"search_vec":"'1.5.1':50 '2016':74 '3':83 '4':90 '5':92 'activ':98 'asset':32 'better':61 'browsersync':28 'bundl':66 'compat':23 'compil':16,31 'connect':22 'connect-compat':21 'current':105 'design':59 'dev':57,102 'develop':39 'disk':44 'enabl':12 'express.js':26 'express/browsersync':4 'faster':36 'file':42 'fork':53 'general':95 'howev':67 'incompat':86 'isomorph':63 'javascript':107 'less':81 'like':25 'maintain':99 'make':84 'memori':34 'middlewar':2,7,19,58,103 'mix':64 'modern':88 'offer':35 'packag':47 'prefer':96 'project':106 'rebuild':37 'run':13 'serv':30 'server':24 'sinc':73 'specif':46 'support':62 'tie':77 'updat':72 'user':93 'version':49,80 'web/node.js':65 'webpack':1,6,15,56,79,89,101 'webpack-dev-middlewar':55,100 'webpack-middlewar':5 'without':40 'wrapper':10 'write':41","created_at":"2026-04-23T17:49:16.289087+00:00","updated_at":"2026-04-23T17:49:16.289087+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/kriasoft/webpack-middleware","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/webpack-middleware","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-22","install_tag":null}}