# browser-sync-webpack-plugin

> BrowserSync and Webpack integration

Latest version **2.4.0** (published 2025-06-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install browser-sync-webpack-plugin
pnpm add browser-sync-webpack-plugin
yarn add browser-sync-webpack-plugin
bun add browser-sync-webpack-plugin
```

## Health

**Score 38/100 (D)** — status: stable.

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.4.0 |
| Published | 2025-06-04 |
| First published | 2015-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/browser-sync-webpack-plugin) |
| Module format | CommonJS |
| Node | >=4 |
| Dependencies | 1 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 367 |
| Author | Valentyn Barmashyn |
| Maintainers | val_ |
| Keywords | webpack, webpack-plugin, browsersync, browser-sync, livereload, serve |

## Links

- npm: https://www.npmjs.com/package/browser-sync-webpack-plugin
- Repository: https://github.com/Va1/browser-sync-webpack-plugin
- Issues: https://github.com/Va1/browser-sync-webpack-plugin/issues
- npm.io page: https://npm.io/package/browser-sync-webpack-plugin

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 2.4.0 (latest) — 2025-06-04
- 2.3.0 — 2020-12-21
- 2.2.2 — 2018-03-19
- 2.2.1 — 2018-03-17
- 2.2.0 — 2018-03-17
- 2.0.1 — 2018-02-01
- 2.0.0 — 2018-02-01
- 1.2.0 — 2017-07-03
- 1.1.4 — 2017-01-30
- 1.1.3 — 2016-09-20
- 1.1.2 — 2016-08-02
- 1.1.1 — 2016-08-02
- 1.1.0 — 2016-07-06
- 1.0.3 — 2016-06-04
- 1.0.2 — 2016-06-03
- … 8 more at https://npm.io/package/browser-sync-webpack-plugin/versions

## README

# [BrowserSync](https://browsersync.io/) plugin for [Webpack](https://webpack.js.org/)

Easily use BrowserSync in your Webpack project.

## Install:

```bash
$ npm install --save-dev browser-sync-webpack-plugin
```
or
```bash
$ yarn add --dev browser-sync-webpack-plugin
```

With release of 2.0.0 the plugin is expected to be used in Node v4+ environment.
Support for Node v3 and lower was dropped, but you can install and use the plugin version of 1.2.0 in older environments.

## Usage:

BrowserSync will start only when you run Webpack in [watch mode](http://webpack.github.io/docs/tutorials/getting-started/#watch-mode):

```bash
$ webpack --watch
```

### Basic:

If you're not using Webpack Dev Server, you can make BrowserSync to serve your project.
The setup is pretty easy: just pass the [BrowserSync options](http://www.browsersync.io/docs/options/) to the plugin as the first argument.

In your `webpack.config.js`:

```javascript
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new BrowserSyncPlugin({
      // browse to http://localhost:3000/ during development,
      // ./public directory is being served
      host: 'localhost',
      port: 3000,
      server: { baseDir: ['public'] }
    })
  ]
}
```

### Advanced:

The advanced usage is about using [Webpack Dev Server](https://github.com/webpack/webpack-dev-server) with BrowserSync in order to use awesome features of both.

To achieve this, BrowserSync offers the [proxy](http://www.browsersync.io/docs/options/#option-proxy) option.
So, basically, you are about to proxy the output from the Webpack Dev Server through BrowserSync to get the best out of both.

In your `webpack.config.js`:

```javascript
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new BrowserSyncPlugin(
      // BrowserSync options
      {
        // browse to http://localhost:3000/ during development
        host: 'localhost',
        port: 3000,
        // proxy the Webpack Dev Server endpoint
        // (which should be serving on http://localhost:3100/)
        // through BrowserSync
        proxy: 'http://localhost:3100/'
      },
      // plugin options
      {
        // prevent BrowserSync from reloading the page
        // and let Webpack Dev Server take care of this
        reload: false
      }
    )
  ]
}
```

---

Other supported plugin options are:

* `name` - default: `bs-webpack-plugin`, BrowserSync [instance name](http://www.browsersync.io/docs/api/#api-name)
* `callback` - default: `undefined`, BrowserSync [instance init callback](http://www.browsersync.io/docs/api/#api-cb).
* `injectCss` - default: `false`, allows BrowserSync to inject changes inplace instead of reloading the page when changed chunks are all CSS files

## Contributing:

Feel free to open issues to propose stuff and participate. Pull requests are also welcome.

## Licence:

[MIT](http://en.wikipedia.org/wiki/MIT_License)

---
_Source: https://npm.io/package/browser-sync-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._