livereload-webpack-plugin
This plugin for Webpack is based from statianzo's plugin : webpack-livereload-plugin
This plugin is compatible wih Webpack 4 & Webpack 5
Installation
Install the package
npm install --save-dev @kooneko/livereload-webpack-pluginAdd the plugin to your webpack config
// webpack.config.js
var LiveReloadWebpackPlugin = require('@kooneko/livereload-webpack-plugin');
module.exports = {
plugins: [
new LiveReloadWebpackPlugin(options)
]
}Add a script tag to your page pointed at the livereload server
<script src="http://localhost:35729/livereload.js"></script>Options
| Option | Default | Description |
|---|---|---|
protocol |
protocol of the page, either http or https
|
Protocol for livereload <script> src attribute value |
port |
35729 |
The desired port for the livereload server. If you not define port, an available port will be searched for, starting from 35729 |
hostname |
hostname of the page, like localhost or 10.0.2.2
|
The desired hostname for the appended <script> (if present) to point to |
quiet |
false |
Prevent message " Live reload listening on port ..." from appearing in the console |
appendScript |
false |
Append livereload <script> automatically to <head>
|
delay |
0 |
amount of milliseconds by which to delay the live reload (in case build takes longer) |
ignore |
null |
RegExp of files to ignore. Null value means ignore nothing. It is also possible to define an array and use multiple anymatch patterns |
Why?
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.
HTTPS
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.
FAQ
Webpack always generates js and css together
If this slows your build process you could set liveCSS
and liveImg to false to prevent multiple reloads.