handmade-livereload-webpack-plugin
v2.5.0
Published
A Webpack plugin that allows pages to be automatically reloaded without the DevServer
Downloads
12
Readme
handmade-livereload-webpack-plugin
A Webpack plugin that allows pages to be automatically reloaded without the DevServer.
This is a very simple Webpack plugin that allows to reload web pages while developing,
without the need to set up the DevServer.
This reduces configuration differences between production
and development
.
It uses ws.
It's a development
only module.
How it works
This module is composed by 2 little components:
- the webpack plugin itself, that every time the compiler
done
event is emitted, sends aws
event calledRELOAD
- a script, to be injected in the involved web pages, that is listening for the WebSocket
message
event withevent.data === "RELOAD"
and reacts reloading the page by doingwindow.location.reload()
Install
yarn add handmade-livereload-webpack-plugin -D
Usage
In the webpack configuration file, it must be first initialized with two mandatory keys port
and host
and one optional key delay
(in milliseconds).
// webpack.config.js file
var HandmadeLiveReload = require("handmade-livereload-webpack-plugin")({
port: 1234,
host: "localhost",
delay: 100 // emit the RELOAD event 100 ms after the webpack `done` hook
});
The handmade-livereload
instance in an object with 2 keys:
the
plugin
key is the plugin itself that can be added to the webpack plugins (if not production):// webpack.config.js file const IS_PROD = process.env.NODE_ENV === 'production' ? true : false; if (!IS_PROD) { plugins.push(new HandmadeLiveReload.plugin()); }
the
path_to_client keys
is just a string with the absolute path to the js source file that can be added to the webpack entries in order to be compiled:// webpack.config.js file if (!IS_PROD) { entry: { "handmade_live_reload": HandmadeLiveReload.path_to_client } }
The
handmade_live_reload.js
compiled script have to be added to the involved web pages; using the HTML Webpack Plugin:// webpack.config.js file new HtmlWebpackPlugin({ chunks: ['app', 'handmade_live_reload'] })
Thanks to @pmwmedia for the Typescript types definitions!