Registry / http-networking / webpack-plugin-serve

webpack-plugin-serve

library1.6.0jsnpmunverified

webpack-plugin-serve is a fast and lean development server implemented as a Webpack plugin, offering an alternative to webpack-dev-server. It integrates directly into the Webpack compilation process, which can simplify configuration. The current stable version, 1.6.0, supports Webpack 4 and 5, and Node.js Active LTS versions (>=10.0.0, with a specific range for 10.x). The project appears to have a consistent release cadence with regular bugfixes and features, often including dependency updates. Key differentiators include its plugin-based architecture, focus on being 'evergreen' with Node.js support, and a comprehensive feature grid for comparison with alternatives. It emphasizes flexibility, allowing many features typically found in a dev server to be implemented via middleware. It ships with a client script that supports modern browsers (async/await) but can be transpiled for older ones. This plugin is often used in conjunction with `webpack-nano` for a minimal CLI experience.

http-networking web-framework devops

npm install webpack-plugin-serve

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-PLUGIN-SER

webpack-plugin-serve

http-networkingjavascriptv1.6.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

WebpackPluginServe

✓ import { WebpackPluginServe } from 'webpack-plugin-serve';

✗ const { Serve } = require('webpack-plugin-serve'); // 'Serve' is an alias, not the direct export

The primary class export. The documentation often uses `const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');` for brevity, but `WebpackPluginServe` is the actual class name.

client

✓ import 'webpack-plugin-serve/client';

✗ require('webpack-plugin-serve/client');

This import needs to be added to your webpack entry point(s) to enable HMR and live-reloading in the browser. It's a side-effect import.

Configure Client Options

✓ new Serve({ client: { address: 'localhost:8080', protocol: 'https' } });

✗ new Serve({ client: { host: 'localhost', port: 8080 } }); // Use 'address' for WebSocket host:port, 'protocol' for WebSocket protocol.

Client-side options like address and protocol are configured within the `client` object in the plugin options, not directly as top-level properties.

This quickstart demonstrates setting up `webpack-plugin-serve` with basic HMR, live-reloading, static file serving, and history fallback for SPAs. It uses an environment variable for the port and sets up typical entry/output paths.

import { WebpackPluginServe } from 'webpack-plugin-serve'; import path from 'path'; const PORT = process.env.PORT ?? 55555; export default { mode: 'development', entry: [ 'webpack-plugin-serve/client', // Important: this is required for client-side magic path.resolve(__dirname, 'src/index.js') // Your main application entry point ], output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/' // Ensure publicPath is set correctly for HMR }, plugins: [ new WebpackPluginServe({ port: PORT, static: path.resolve(__dirname, 'public'), // Serve static files from 'public' liveReload: true, // Enable live reloading hmr: true, // Enable Hot Module Replacement historyFallback: true // Fallback to index.html for SPA routing }) ], watch: true // Important: webpack and the server will continue to run in watch mode };

Debug

Known issues

breakingThe minimum supported Node.js version was bumped in v0.12.0. Users on older Node.js versions will encounter errors.

fix

Upgrade Node.js to an Active LTS version (v10.0.0+ for current versions of the plugin). Refer to the Node.js release schedule for supported versions.

affects: >=0.12.0

breakingThe `static` option's handling for arrays changed in v0.10.0, particularly for users expecting glob support. Old array formats might cause a regression if not updated to the new object format.

fix

Review the documentation for the `static` option and adopt the new option format, especially if using globs or an array of paths. The new format is typically an object specifying a `glob` property for patterns.

affects: >=0.10.0

gotchaThe client scripts in `webpack-plugin-serve` require browsers that support `async/await`. While modern browsers are fine, older browsers might fail.

fix

For older browser support, configure Babel with an appropriate Webpack loader to transpile the client script. The `webpack-plugin-serve/client` entry point should be processed by your Babel loader.

affects: >=0.1.0

gotchaFor Hot Module Replacement (HMR) and live-reloading to function, you *must* include `'webpack-plugin-serve/client'` as an entry point in your webpack configuration.

fix

Add `'webpack-plugin-serve/client'` to your `entry` array in `webpack.config.js`. Ensure it's listed before your application's main entry file.

affects: >=0.1.0

gotchaThe plugin requires `watch: true` in your webpack configuration to operate correctly and continuously. Without it, webpack will compile once and exit.

fix

Set `watch: true` in your `module.exports` object within `webpack.config.js`.

affects: >=0.1.0

Errors

Common errors & fixes

ERROR in webpack-plugin-serve: Client connection failed. Check your network configuration.

The client script could not establish a WebSocket connection to the server, often due to incorrect `client.address` or `client.protocol` settings, or firewall issues.

fix

Verify that `client.address` in your `WebpackPluginServe` options matches the server's actual address and port, and that `client.protocol` (default 'ws') is correct for your setup (e.g., 'wss' for HTTPS). Check firewall settings if running on a remote host.

Error: "client" option is missing the required property "address"

When customizing client settings, you might be trying to set host/port directly instead of using the `address` property.

fix

Use the `client.address` option in the format `host:port` (e.g., `client: { address: 'localhost:8080' }`) instead of separate `host` and `port` properties within the `client` object.

Node.js vX.Y.Z is not supported. Please use a supported Node.js version.

The installed Node.js version does not meet the minimum requirements for `webpack-plugin-serve`.

fix

Upgrade Node.js to a version that is actively supported by the `webpack-plugin-serve` package. Check the `engines` field in the `package.json` or the README for the specific requirements.

Upgrade

Version history

1.6.0latest on npm

Audit

Dependencies

webpackrequiredPeer dependency for webpack integration.

webpack-nanooptionalRecommended CLI for running webpack with webpack-plugin-serve.

Agent activity

22 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/shellscape/webpack-plugin-serve ↗

packagehttps://www.npmjs.com/package/webpack-plugin-serve ↗