browser-reload-plugin
v1.1.0
Published
Automatically reload the browser page on every Webpack watch build
Downloads
48
Maintainers
Readme
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.