Webpack Dev Stats Viewer Middleware

1.0.0 verified Fri May 01 auth: no javascript

Express middleware that works with webpack-dev-middleware to expose raw webpack stats at a configurable URL. Version 1.0.0, likely stable with low release cadence. Key differentiator: provides deep visibility into webpack compilation stats (assets, modules, chunks) for debugging and monitoring, leveraging webpack-dev-middleware's serverSideRender flag. Unlike webpack-bundle-analyzer or other visualizers, this package gives raw stats JSON for programmatic inspection.

Common errors

error TypeError: Cannot read property 'stats' of undefined ↓

cause webpack-dev-middleware not configured with serverSideRender: true, so req.stats is missing.

fix

Add { serverSideRender: true } to webpack-dev-middleware options.

error statsViewer is not a function ↓

cause Incorrect import; trying to use default import in CJS environment or named import on a default export.

fix

Use const statsViewer = require('webpack-dev-stats-viewer-middleware'); (CJS) or import statsViewer from 'webpack-dev-stats-viewer-middleware' (ESM, if supported).

Warnings

gotcha URL must be under webpack-dev-middleware's path (e.g., /dev-server/stats) and within the same path prefix used for the middleware. ↓

fix Ensure statsViewer URL is a subpath of the webpack-dev-middleware mount path.

gotcha webpack-dev-middleware must be called with serverSideRender: true for the stats object to be attached to the request. ↓

fix Add { serverSideRender: true } as second argument to webpack-dev-middleware.

deprecated Require-style import may become deprecated if package adopts ESM in future. ↓

fix No immediate fix; monitor for ESM support.

Install

npm install webpack-dev-stats-viewer-middleware

yarn add webpack-dev-stats-viewer-middleware

pnpm add webpack-dev-stats-viewer-middleware

Imports

statsViewer

wrong

import statsViewer from 'webpack-dev-stats-viewer-middleware';

correct

const statsViewer = require('webpack-dev-stats-viewer-middleware');

Package only provides a CommonJS module (require). No ESM export.

default export (function)

wrong

import { statsViewer } from 'webpack-dev-stats-viewer-middleware';

correct

import statsViewer from 'webpack-dev-stats-viewer-middleware';

Default export is a function; named import will not work.

TypeScript type (if available)
```
import statsViewer from 'webpack-dev-stats-viewer-middleware';
```
Package does not ship TypeScript types; use @types/ or define own.

Quickstart

Set up an Express app with webpack-dev-middleware and add the stats viewer at /dev-server/stats.

const express = require('express');
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const statsViewer = require('webpack-dev-stats-viewer-middleware');

const app = express();
const compiler = webpack({ mode: 'development', entry: './src/index.js' });

app.use('/dev-server/', webpackMiddleware(compiler, {
  serverSideRender: true
}));

statsViewer(app, '/dev-server/stats');

app.listen(3000, () => console.log('Server running on port 3000'));