1.1.0 • Public • Published

browser-reload-plugin Latest version Monthly downloads Install size

Automatically reload the browser page on every Webpack watch build

🙋‍♂️ Why?

  • 🔥 Automatic browser reloads Speed up development by auto-reloading as soon as your build completes!
  • ⚡️ Quick setup All you need is two lines of code to add the plugin!
  • 🔌 Auto Reconnects Automatically reconnects when restarting the watch!

🚀 Install

npm i -D browser-reload-plugin

🚦 Quick Setup

In your development Webpack config:

+ const BrowserReloadPlugin = require('browser-reload-plugin')
  module.exports = {
    plugins: [
+     new BrowserReloadPlugin()

That's it! 🎉 Just run your watch command to see it in action.

🎛 Browser API

The plugin globally exposes a __browserReloadPlugin object that lets you configure the plugin at run-time.

  • enabled (true) - Whether to reload the browser on changes.
  • retryWait (retryWait from plugin options) - How long to wait before re-trying a failed connection on the client-side.
  • wsServer (ws://localhost:PORT) - The WebSocket server address.

To recongiure at run-time, simply rewrite the object properties:

__browserReloadPlugin.enabled = false;

⚙️ Options

  • port (8080) - Port to bind the servert to. If unavailable, it falls back to a random available port.
  • retryWait (5000) - How long to wait before re-trying a failed connection on the client-side.
  • include (/\.js$/) - A pattern (string | RegExp | [string, RegExp]) to match entry-files to add the client-code to. This is useful if your app has multiple entry-points but you only want the reload client to be added to specific ones.
  • exclude - A pattern (string | RegExp | [string, RegExp]) to exclude certain entry-points.

💁‍♀️ FAQ

Does this work on regular builds?

No, it's designed specifically for Webpack watch mode.

Should I use this over Hot Module Replacement (HMR)?

No, HMR is far superior to this approach. Only use this plugin when you have a sophisticated application that doesn't work well with HMR but you'd still like to automate browser page reloads on build.

How is this different from webpack-livereload-plugin?

webpack-livereload-plugin requires adding a <script> tag to your HTML document in order to make live-reload work. This plugin automatically injects itself to the entry-points of your app, and doesn't require any additional setup apart from adding the plugin to the Webpack configuration. It's also much lighter & faster.


DownloadsWeekly Downloads






Unpacked Size

8.32 kB

Total Files


Last publish


  • hirokiosame