webpack-livereload-plugin

3.0.2 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause Missing local installation or not installed as dev dependency.

fix

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

error TypeError: LiveReloadPlugin is not a constructor ↓

cause 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 Error: listen EADDRINUSE :::35729 ↓

cause 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 }).

Warnings

deprecated Option '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.

gotcha If 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.

gotcha The 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>.

gotcha When 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.

Install

npm install webpack-livereload-plugin

yarn add webpack-livereload-plugin

pnpm add webpack-livereload-plugin

Imports

LiveReloadPlugin
wrong
```
import LiveReloadPlugin from 'webpack-livereload-plugin';
```
correct
```
const LiveReloadPlugin = require('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
wrong
```
import { LiveReloadPlugin } from 'webpack-livereload-plugin';
```
correct
```
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

wrong

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

correct

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

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

Quickstart

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