Registry / devops / webpack-livereload-plugin

webpack-livereload-plugin

library3.0.2jsnpmunverified

LiveReload plugin for Webpack that triggers browser reloads when assets change during `webpack --watch`. Current stable version is 3.0.2, actively maintained. It differs from webpack-dev-server by being designed for cases where assets are served by an external app server (e.g., a backend framework) while still benefiting from LiveReload. Uses tiny-lr under the hood. Supports HTTPS, custom ports/hostnames, optional script injection, file ignoring, delay, and source hash/size change detection to avoid duplicate reloads. Works with both Webpack 4 and 5.

devops

npm install webpack-livereload-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-LIVERELOAD

webpack-livereload-plugin

devopsjavascriptv3.0.2

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.

LiveReloadPlugin

✓ const LiveReloadPlugin = require('webpack-livereload-plugin');

✗ import LiveReloadPlugin from 'webpack-livereload-plugin';

This package does not export an ES module; using CommonJS require() is the correct way to import. If you must use ESM, consider using default import with a bundler that handles CJS interop, but it's not guaranteed to work.

LiveReloadPlugin

✓ import LiveReloadPlugin from 'webpack-livereload-plugin';

✗ import { LiveReloadPlugin } from 'webpack-livereload-plugin';

The export is a default export, not a named export. Use default import if your module system allows it (e.g., with Babel or TypeScript's esModuleInterop).

LiveReloadPlugin

✓ const LiveReloadPlugin = require('webpack-livereload-plugin');

✗ var LiveReloadPlugin = require('webpack-livereload-plugin').default;

Do not use .default on the require result; the CJS export is the plugin constructor directly.

Minimal webpack config adding LiveReloadPlugin with automatic script injection, then run webpack --watch to trigger reloads on file changes.

// webpack.config.js const LiveReloadPlugin = require('webpack-livereload-plugin'); const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, mode: 'development', plugins: [ new LiveReloadPlugin({ port: 35729, hostname: 'localhost', appendScriptTag: true }) ] }; // Run with: npx webpack --watch

Debug

Known issues

deprecatedOption 'liveCSS' and 'liveImg' are deprecated; use 'useSourceHash' or 'useSourceSize' to prevent multiple reloads.

fix

Set useSourceHash: true or useSourceSize: true instead of liveCSS: false and liveImg: false.

affects: >=3.0.0

gotchaIf you set port to 0, the plugin searches for an available port starting from 35729, which may cause the livereload script URL to be unpredictable unless you read the actual port from the server.

fix

Specify a fixed port number, or use the 'port' event on the plugin to retrieve the actual port.

affects: *

gotchaThe appendScriptTag option only works if webpack processes HTML files that contain a <head> tag; it does not work if HTML is served from a different server.

fix

Manually add the script tag: <script src='//localhost:35729/livereload.js'></script>.

affects: *

gotchaWhen using useSourceSize, if a file's content changes but size remains the same (e.g., color change), no reload will be triggered.

fix

Use useSourceHash instead, which compares file hash rather than size.

affects: >=3.0.0

Errors

Common errors & fixes

Error: Cannot find module 'webpack-livereload-plugin'

Missing local installation or not installed as dev dependency.

fix

Run 'npm install --save-dev webpack-livereload-plugin' in your project.

TypeError: LiveReloadPlugin is not a constructor

Using import { LiveReloadPlugin } from '...' as named import instead of default import.

fix

Use: const LiveReloadPlugin = require('webpack-livereload-plugin'); or import LiveReloadPlugin from 'webpack-livereload-plugin';

Error: listen EADDRINUSE :::35729

Port 35729 is already in use by another instance of the plugin or another livereload server.

fix

Specify a different port in the options, e.g., new LiveReloadPlugin({ port: 35730 }).

Upgrade

Version history

3.0.2latest on npm

Audit

Dependencies

tiny-lrrequiredprovides the LiveReload server implementation

webpackrequiredpeer dependency; webpack 4 or 5 required

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/statianzo/webpack-livereload-plugin ↗

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