Auto Live Reload Webpack Plugin

This Webpack plugin can be used to reload the web page automatically when Webpack recompiled any bundle like HTML pages, JavaScript, or stylesheets. It works even on any custom server. DevServer is not required. The plugin is especially helpful when running Webpack in watch mode.

Install

1npm i --save-dev auto-live-reload-webpack-plugin

1yarn add --dev auto-live-reload-webpack-plugin

Options

Option	Values	Default
host	host name or IP address as string	localhost
port	any number between 0 - 65,535	0
enabled	true or false	true

Host

The host can be any legal host name or IP address. If you run your server and client on the same machine, you can keep the default value localhost.

Port

The port can be any legal port number between 0 - 65,535. If set 0 as port, a random available port will be used.

Enabled

By default, live reloading is enabled. If enabled is explicitly set to false, the plugin creates live reload files with a no-op. This means that the live reload files are present, but will not trigger any reloads. This can be helpful if you don't need live reloads, but your server requires that the files are present and contain valid JavaScript.

Getting Started

1. Install the plugin:

1npm i --save-dev auto-live-reload-webpack-plugin

1yarn add --dev auto-live-reload-webpack-plugin

2. Add the plugin to your entry point in webpack.config.js or webpack.config.ts:

1const path = require('path');
2const AutoLiveReloadPlugin = require('auto-live-reload-webpack-plugin');
3
4const autoAutoLiveReloadPlugin = new AutoLiveReloadPlugin({ /* place your options here */ });
5
6module.exports = {
7  entry: ['./src/index.js', autoAutoLiveReloadPlugin.clientEntryFile()],
8  plugins: [autoAutoLiveReloadPlugin],
9  output: {
10    filename: 'index.js',
11    path: path.resolve(__dirname, 'dist'),
12  },
13};

Multiple entry points can share the same instance of AutoLiveReloadPlugin and the same entry point for autoAutoLiveReloadPlugin.clientEntryFile(). In opposite to tiny-lr based Webpack plugins, multiple live reload files are supported in the same HTML page.

Credits

Inspired by the awesome zsimo/handmade-livereload-webpack-plugin, enhanced and redeveloped in Typescript by Martin Winandy.