{"id":14342,"library":"webpack-plugin-serve","title":"Webpack Plugin Serve","description":"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.","status":"active","version":"1.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/shellscape/webpack-plugin-serve","tags":["javascript","dev","development","devserver","serve","server","webpack"],"install":[{"cmd":"npm install webpack-plugin-serve","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-plugin-serve","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-plugin-serve","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for webpack integration.","package":"webpack","optional":false},{"reason":"Recommended CLI for running webpack with webpack-plugin-serve.","package":"webpack-nano","optional":true}],"imports":[{"note":"The primary class export. The documentation often uses `const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');` for brevity, but `WebpackPluginServe` is the actual class name.","wrong":"const { Serve } = require('webpack-plugin-serve'); // 'Serve' is an alias, not the direct export","symbol":"WebpackPluginServe","correct":"import { WebpackPluginServe } from 'webpack-plugin-serve';"},{"note":"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.","wrong":"require('webpack-plugin-serve/client');","symbol":"client","correct":"import 'webpack-plugin-serve/client';"},{"note":"Client-side options like address and protocol are configured within the `client` object in the plugin options, not directly as top-level properties.","wrong":"new Serve({ client: { host: 'localhost', port: 8080 } }); // Use 'address' for WebSocket host:port, 'protocol' for WebSocket protocol.","symbol":"Configure Client Options","correct":"new Serve({ client: { address: 'localhost:8080', protocol: 'https' } });"}],"quickstart":{"code":"import { WebpackPluginServe } from 'webpack-plugin-serve';\nimport path from 'path';\n\nconst PORT = process.env.PORT ?? 55555;\n\nexport default {\n  mode: 'development',\n  entry: [\n    'webpack-plugin-serve/client', // Important: this is required for client-side magic\n    path.resolve(__dirname, 'src/index.js') // Your main application entry point\n  ],\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n    publicPath: '/' // Ensure publicPath is set correctly for HMR\n  },\n  plugins: [\n    new WebpackPluginServe({\n      port: PORT,\n      static: path.resolve(__dirname, 'public'), // Serve static files from 'public'\n      liveReload: true, // Enable live reloading\n      hmr: true, // Enable Hot Module Replacement\n      historyFallback: true // Fallback to index.html for SPA routing\n    })\n  ],\n  watch: true // Important: webpack and the server will continue to run in watch mode\n};\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The minimum supported Node.js version was bumped in v0.12.0. Users on older Node.js versions will encounter errors.","severity":"breaking","affected_versions":">=0.12.0"},{"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.","message":"The `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.","severity":"breaking","affected_versions":">=0.10.0"},{"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.","message":"The client scripts in `webpack-plugin-serve` require browsers that support `async/await`. While modern browsers are fine, older browsers might fail.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"For Hot Module Replacement (HMR) and live-reloading to function, you *must* include `'webpack-plugin-serve/client'` as an entry point in your webpack configuration.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Set `watch: true` in your `module.exports` object within `webpack.config.js`.","message":"The plugin requires `watch: true` in your webpack configuration to operate correctly and continuously. Without it, webpack will compile once and exit.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'1.6.0':44 '10':61 '10.0.0':55 '4':47 '5':49 'activ':52 'allow':108 'altern':22,104 'appear':65 'architectur':88 'async/await':132 'base':87 'browser':131 'bugfix':74 'cadenc':71 'cli':154 'client':126 'comparison':102 'compil':34 'comprehens':98 'configur':39 'conjunct':146 'consist':69 'current':41 'depend':79 'dev':26,115,157 'develop':13,158 'devserv':159 'differenti':82 'direct':30 'emphas':106 'evergreen':92 'experi':155 'fast':10 'featur':76,99,110 'flexibl':107 'focus':89 'found':112 'grid':100 'implement':15,119 'includ':78,83 'integr':29 'javascript':156 'key':81 'lean':12 'lts':53 'mani':109 'middlewar':121 'minim':153 'modern':130 'nano':150 'node.js':51,94 'offer':20 'often':77,143 'older':138 'one':139 'plugin':2,6,19,86,141 'plugin-bas':85 'process':35 'project':64 'rang':59 'regular':73 'releas':70 'script':127 'serv':3,7,160 'server':14,27,116,161 'ship':123 'simplifi':38 'specif':58 'stabl':42 'support':45,95,129 'transpil':136 'typic':111 'updat':80 'use':144 'version':43,54 'via':120 'webpack':1,5,18,25,33,46,149,162 'webpack-dev-serv':24 'webpack-nano':148 'webpack-plugin-serv':4 'x':62","created_at":"2026-04-20T01:59:12.618225+00:00","updated_at":"2026-04-20T01:59:12.618225+00:00","problems":[{"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.","cause":"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.","error":"ERROR in webpack-plugin-serve: Client connection failed. Check your network configuration."},{"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.","cause":"When customizing client settings, you might be trying to set host/port directly instead of using the `address` property.","error":"Error: \"client\" option is missing the required property \"address\""},{"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.","cause":"The installed Node.js version does not meet the minimum requirements for `webpack-plugin-serve`.","error":"Node.js vX.Y.Z is not supported. Please use a supported Node.js version."}],"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/shellscape/webpack-plugin-serve","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/webpack-plugin-serve","openapi_spec":null,"status_page":null,"smithery":null,"categories":["http-networking","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-18","install_tag":null}}