{"id":16347689,"url":"https://github.com/privatenumber/browser-reload-plugin","last_synced_at":"2025-10-10T09:42:48.410Z","repository":{"id":53179229,"uuid":"305010363","full_name":"privatenumber/browser-reload-plugin","owner":"privatenumber","description":"Automatically reload the browser page on every Webpack watch build","archived":false,"fork":false,"pushed_at":"2021-04-09T02:30:31.000Z","size":90,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-02-16T16:02:05.562Z","etag":null,"topics":["browser","live","plugin","refresh","reload","watch","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/privatenumber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-18T02:53:55.000Z","updated_at":"2024-12-16T11:44:21.000Z","dependencies_parsed_at":"2022-09-15T01:45:35.598Z","dependency_job_id":null,"html_url":"https://github.com/privatenumber/browser-reload-plugin","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fbrowser-reload-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fbrowser-reload-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fbrowser-reload-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fbrowser-reload-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/privatenumber","download_url":"https://codeload.github.com/privatenumber/browser-reload-plugin/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241698978,"owners_count":20005299,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","live","plugin","refresh","reload","watch","webpack"],"created_at":"2024-10-11T00:44:50.203Z","updated_at":"2025-10-10T09:42:43.357Z","avatar_url":"https://github.com/privatenumber.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# browser-reload-plugin [![Latest version](https://badgen.net/npm/v/browser-reload-plugin)](https://npm.im/browser-reload-plugin) [![Monthly downloads](https://badgen.net/npm/dm/browser-reload-plugin)](https://npm.im/browser-reload-plugin) [![Install size](https://packagephobia.now.sh/badge?p=browser-reload-plugin)](https://packagephobia.now.sh/result?p=browser-reload-plugin)\n\nAutomatically reload the browser page on every Webpack watch build\n\n## 🙋‍♂️ Why?\nManually reloading the browser page after your Webpack watch-build finishes is tedious and can really add up.\n\nSpeed up development iterations in environments that don't support [Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/) with _browser-reload-plugin_.\n\n\n## 🚀 Install\n```sh\nnpm i -D browser-reload-plugin\n```\n\n## 🚦 Quick Setup\nAll you need is two lines of code to get started with the plugin!\n\nIn your development Webpack config:\n\n```diff\n+ const BrowserReloadPlugin = require('browser-reload-plugin')\n\n  module.exports = {\n    ...,\n\n    plugins: [\n+     new BrowserReloadPlugin()\n    ]\n  }\n```\n\nThat's it! 🎉 Just run your `watch` command to see it in action.\n\n\n## 🎛 Browser API\nThe plugin globally exposes a `__browserReloadPlugin` object that lets you configure the plugin at run-time.\n\n- `enabled` (`true`) - Whether to reload the browser on changes.\n- `retryWait` (`retryWait` from plugin options) - How long to wait before re-trying a failed connection on the client-side.\n- `wsServer` (`ws://localhost:PORT`) - The WebSocket server address.\n\nYou can also reconfigure at run-time by rewriting the object properties. For example:\n\n```js\n__browserReloadPlugin.enabled = false;\n```\n\n\n## ⚙️ Options\n\n- `port` (`8080`) - Port to bind the servert to. If unavailable, it falls back to a random available port.\n- `retryWait` (`5000`) - How long to wait before re-trying a failed connection on the client-side.\n- `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.\n- `exclude` - A pattern (`string | RegExp | [string, RegExp]`) to exclude certain entry-points.\n\n## 💁‍♀️ FAQ\n\n### Does this work on regular non-watch builds?\n\nNo, it's designed specifically for Webpack watch mode.\n\n\n### Should I use this over [Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)?\n\nHMR 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.\n\n\n### How is this different from [webpack-livereload-plugin](https://www.npmjs.com/package/webpack-livereload-plugin)?\n\n`webpack-livereload-plugin` requires adding a `\u003cscript\u003e` 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 \u0026 faster.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprivatenumber%2Fbrowser-reload-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprivatenumber%2Fbrowser-reload-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprivatenumber%2Fbrowser-reload-plugin/lists"}