Registry / devops / browser-sync-webpack-plugin

browser-sync-webpack-plugin

library2.4.0jsnpmunverified

Webpack plugin that integrates BrowserSync for live reloading and cross-device testing during development. Current stable version is 2.4.0, with support for Webpack 1–5 and BrowserSync 2–3. It is typically used when you want BrowserSync's UI and synchronized browsing alongside Webpack's watch mode, either serving directly or proxying Webpack Dev Server. The plugin requires Node >=4 and is published on npm. Key differentiator: it adds BrowserSync's multi-device sync, UI dashboard, and tunnel capabilities to Webpack builds without needing to run a separate process. Contributions welcome, MIT license.

devops web-framework

npm install browser-sync-webpack-plugin

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BROWSER-SYNC-WEBPA

browser-sync-webpack-plugin

devopsjavascriptv2.4.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

BrowserSyncPlugin

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

✗ import BrowserSyncPlugin from 'browser-sync-webpack-plugin'

CommonJS is the traditional pattern; ESM may not work depending on Node module resolution. Use require() for compatibility.

Default export (as plugin)

✓ import BrowserSyncPlugin from 'browser-sync-webpack-plugin'

✗ import { BrowserSyncPlugin } from 'browser-sync-webpack-plugin'

The package exports a single constructor as default. Named import will be undefined.

TypeScript type (if needed)

✓ import BrowserSyncPlugin from 'browser-sync-webpack-plugin'

✗ import { BrowserSyncPlugin } from 'browser-sync-webpack-plugin'

The package does not ship TypeScript definitions. If using TS, you may need to declare the module or add @types/browser-sync-webpack-plugin if available.

Shows basic usage of BrowserSyncPlugin with Webpack watch mode; starts a local server serving 'dist' directory on port 3000.

// webpack.config.js const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', filename: 'bundle.js' }, plugins: [ new BrowserSyncPlugin({ host: 'localhost', port: 3000, server: { baseDir: ['dist'] } }) ] };

Debug

Known issues

deprecatedPlugin will not automatically inject CSS changes unless `injectCss: true` option is set. Default behavior is full page reload.

fix

Set `injectCss: true` in plugin options to enable CSS injection without reload.

affects: >=2.0.0

breakingNode v3 and lower support dropped in version 2.0.0.

fix

Use Node >=4. For older Node, use version 1.2.0.

affects: >=2.0.0

gotchaBrowserSync only starts when Webpack runs in watch mode (`webpack --watch`). Build once without watch will not start BrowserSync.

fix

Ensure you run webpack with --watch flag.

affects: >=1.0.0

gotchaWhen using with Webpack Dev Server, you must set `reload: false` to prevent double reloading.

fix

Pass `{ reload: false }` as second argument to BrowserSyncPlugin constructor.

affects: >=1.0.0

gotchaThe plugin expects BrowserSync v2 or v3. Make sure you have compatible version installed.

fix

Install `browser-sync` as a devDependency with version 2.x or 3.x.

affects: >=2.4.0

Errors

Common errors & fixes

Error: Cannot find module 'browser-sync'

browser-sync is a peer dependency and not installed automatically.

fix

Run npm install --save-dev browser-sync

TypeError: BrowserSyncPlugin is not a constructor

Incorrect import (using named import instead of default).

fix

Use const BrowserSyncPlugin = require('browser-sync-webpack-plugin') or import BrowserSyncPlugin from 'browser-sync-webpack-plugin'

Error: webpack.optimize.OccurrenceOrderPlugin is not a plugin

Using old plugin options with Webpack 4+.

fix

Remove webpack.optimize.OccurrenceOrderPlugin and use default optimization in webpack.config.js.

ReferenceError: window is not defined

Running BrowserSync inside Node environment (not relevant to plugin directly).

fix

Ensure you are not accidentally running browser-sync on server-side without proper configuration.

Upgrade

Version history

2.4.0latest on npm

Audit

Dependencies

browser-syncrequiredPeer dependency: required to run BrowserSync server

webpackrequiredPeer dependency: plugin is used within Webpack build

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Va1/browser-sync-webpack-plugin ↗

packagehttps://www.npmjs.com/package/browser-sync-webpack-plugin ↗

homepagehttps://browsersync.io ↗