{"id":20788,"library":"webpack-livereload-plugin","title":"webpack-livereload-plugin","description":"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.","status":"active","version":"3.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/statianzo/webpack-livereload-plugin","tags":["javascript","webpack","livereload"],"install":[{"cmd":"npm install webpack-livereload-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-livereload-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-livereload-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"provides the LiveReload server implementation","package":"tiny-lr","optional":false},{"reason":"peer dependency; webpack 4 or 5 required","package":"webpack","optional":false}],"imports":[{"note":"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.","wrong":"import LiveReloadPlugin from 'webpack-livereload-plugin';","symbol":"LiveReloadPlugin","correct":"const LiveReloadPlugin = require('webpack-livereload-plugin');"},{"note":"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).","wrong":"import { LiveReloadPlugin } from 'webpack-livereload-plugin';","symbol":"LiveReloadPlugin","correct":"import LiveReloadPlugin from 'webpack-livereload-plugin';"},{"note":"Do not use .default on the require result; the CJS export is the plugin constructor directly.","wrong":"var LiveReloadPlugin = require('webpack-livereload-plugin').default;","symbol":"LiveReloadPlugin","correct":"const LiveReloadPlugin = require('webpack-livereload-plugin');"}],"quickstart":{"code":"// webpack.config.js\nconst LiveReloadPlugin = require('webpack-livereload-plugin');\nconst path = require('path');\n\nmodule.exports = {\n entry: './src/index.js',\n output: {\n path: path.resolve(__dirname, 'dist'),\n filename: 'bundle.js'\n },\n mode: 'development',\n plugins: [\n new LiveReloadPlugin({\n port: 35729,\n hostname: 'localhost',\n appendScriptTag: true\n })\n ]\n};\n\n// Run with: npx webpack --watch","lang":"javascript","description":"Minimal webpack config adding LiveReloadPlugin with automatic script injection, then run webpack --watch to trigger reloads on file changes."},"warnings":[{"fix":"Set useSourceHash: true or useSourceSize: true instead of liveCSS: false and liveImg: false.","message":"Option 'liveCSS' and 'liveImg' are deprecated; use 'useSourceHash' or 'useSourceSize' to prevent multiple reloads.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Specify a fixed port number, or use the 'port' event on the plugin to retrieve the actual port.","message":"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.","severity":"gotcha","affected_versions":"*"},{"fix":"Manually add the script tag: .","message":"The appendScriptTag option only works if webpack processes HTML files that contain a tag; it does not work if HTML is served from a different server.","severity":"gotcha","affected_versions":"*"},{"fix":"Use useSourceHash instead, which compares file hash rather than size.","message":"When using useSourceSize, if a file's content changes but size remains the same (e.g., color change), no reload will be triggered.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev webpack-livereload-plugin' in your project.","cause":"Missing local installation or not installed as dev dependency.","error":"Error: Cannot find module 'webpack-livereload-plugin'"},{"fix":"Use: const LiveReloadPlugin = require('webpack-livereload-plugin'); or import LiveReloadPlugin from 'webpack-livereload-plugin';","cause":"Using import { LiveReloadPlugin } from '...' as named import instead of default import.","error":"TypeError: LiveReloadPlugin is not a constructor"},{"fix":"Specify a different port in the options, e.g., new LiveReloadPlugin({ port: 35730 }).","cause":"Port 35729 is already in use by another instance of the plugin or another livereload server.","error":"Error: listen EADDRINUSE :::35729"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}