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

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

yarn 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:

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

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

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

const path = require('path');
const AutoLiveReloadPlugin = require('auto-live-reload-webpack-plugin');

const autoAutoLiveReloadPlugin = new AutoLiveReloadPlugin({ /* place your options here */ });

module.exports = {
  entry: './src/index.js',
  plugins: [autoAutoLiveReloadPlugin],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

3. Add an entry point for the live reload bundles, which can be served by your custom server:

const path = require('path');
const AutoLiveReloadPlugin = require('auto-live-reload-webpack-plugin');

const autoAutoLiveReloadPlugin = new AutoLiveReloadPlugin();

module.exports = [
  {
    entry: './src/index.js',
    plugins: [autoAutoLiveReloadPlugin],
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
    },
  },
  {
    entry: autoAutoLiveReloadPlugin.clientEntryFile(),
    output: {
      filename: 'main-livereload.js',
      path: path.resolve(__dirname, 'dist'),
    },
  }
];

4. Add both main.js and main-livereload.js to your server. Both bundles have to be inserted into your HTML page. main.js contains all your business logic and main-livereload.js contains only a few lines for the live reload logic.

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

Credits

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