Skip to content

Webpack plugin that allows pages and resources to be automatically reloaded without using DevServer

License

Notifications You must be signed in to change notification settings

pmwmedia/auto-live-reload-webpack-plugin

Repository files navigation

Auto Live Reload Webpack Plugin

npm License: MIT Build

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
  1. 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'),
  },
};
  1. 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'),
    },
  }
];
  1. 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.

About

Webpack plugin that allows pages and resources to be automatically reloaded without using DevServer

Topics

Resources

License

Stars

Watchers

Forks