webpack-livereload-plugin
Advanced tools
LiveReload when running webpack --watch
Install the package
npm install --save-dev webpack-livereload-plugin
Add the plugin to your webpack config
// webpack.config.js
var LiveReloadPlugin = require('webpack-livereload-plugin');
module.exports = {
plugins: [
new LiveReloadPlugin(options)
]
}
Add a script tag to your page pointed at the livereload server
<script src="http://localhost:35729/livereload.js"></script>
protocol - (Default: protocol of the page, either http or https) Protocol for livereload <script> src attribute valueport - (Default: 35729) The desired port for the livereload server. If you define port 0, an available port will be searched for, starting from 35729.hostname - (Default: hostname of the page, like localhost or 10.0.2.2) The desired hostname for the appended
<script> (if present) to point toappendScriptTag - (Default: false) Append livereload <script>
automatically to <head>.ignore - (Default: null) RegExp of files to ignore. Null value means
ignore nothing. It is also possible to define an array and use multiple anymatch patterns.delay - (Default: 0) amount of milliseconds by which to delay the live reload (in case build takes longer)useSourceHash - (Default: false) create hash for each file source and only notify livereload if hash has changeduseSourceSize - (Default: false) check size for each file source and only notify livereload if size has changed (Faster than useSourceHash but it has a downside. If file size hasn't changed no reload is triggered. For example if color has changed from #000000 to #ffffff no reload will be triggered!)Yes, there's already webpack-dev-server that handles live reloading
and more complex scenarios. This project aims to solve the case where
you want assets served by your app server, but still want reloads
triggered from webpack's build pipeline.
If you set key, cert, or pfx options, they'll get passed through to
tiny-lr as options and it will
serve over HTTPS. You'll also also set protocol to https.
If your webpack is always generating js and css files together you could set
useSourceHash to true to generate a hash for each changed asset and it
should prevent multiple reloads.
Alternatively if this slows your build process you could set liveCSS
and liveImg to false to prevent multiple reloads.
FAQs
Livereload for webpack
The npm package webpack-livereload-plugin receives a total of 120,794 weekly downloads. As such, webpack-livereload-plugin popularity was classified as popular.
We found that webpack-livereload-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.