1.2.1 • Published 3 years ago

@kooneko/livereload-webpack-plugin v1.2.1

Weekly downloads
646
License
ISC
Repository
github
Last release
3 years ago

livereload-webpack-plugin

Build Status

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-plugin

Add 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

OptionDefaultDescription
protocolprotocol of the page, either http or httpsProtocol for livereload <script> src attribute value
port35729The desired port for the livereload server. If you not define port, an available port will be searched for, starting from 35729
hostnamehostname of the page, like localhost or 10.0.2.2The desired hostname for the appended <script> (if present) to point to
quietfalsePrevent message " Live reload listening on port ..." from appearing in the console
appendScriptfalseAppend livereload <script> automatically to <head>
delay0amount of milliseconds by which to delay the live reload (in case build takes longer)
ignorenullRegExp 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.