browser-reload-plugin

browser-reload-plugin

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.