LiveReload when running
Install the package
# for webpack 4npm install --save-dev webpack-livereload-plugin# for webpack 3npm install --save-dev webpack-livereload-plugin@1
Add the plugin to your webpack config
// webpack.config.jsvar LiveReloadPlugin = ;moduleexports =plugins:options
Add a script tag to your page pointed at the livereload server
protocol- (Default: protocol of the page, either
https) Protocol for livereload
<script>src attribute value
port- (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
10.0.2.2) The desired hostname for the appended
<script>(if present) to point to
appendScriptTag- (Default: false) Append livereload
null) RegExp of files to ignore. Null value means ignore nothing. It is also possible to define an array and use multiple anymatch patterns.
0) amount of milliseconds by which to delay the live reload (in case build takes longer)
false) create hash for each file source and only notify livereload if hash has changed
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
pfx options, they'll get passed through to
tiny-lr as options and it will
serve over HTTPS. You'll also also set
Webpack always generates js and css together
If your webpack is always generating js and css files together you could set
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
false to prevent multiple reloads.