Registry / devops / browser-sync-v3-webpack-plugin

browser-sync-v3-webpack-plugin

JSON →
library0.1.1jsnpmunverified

A Webpack plugin that integrates BrowserSync for live reload and dev server proxy. This fork (v0.1.1) adds support for BrowserSync v3 (peer dep ^2 || ^3) while maintaining compatibility with Webpack 1–5. It can serve files directly or proxy Webpack Dev Server. BrowserSync starts only in watch mode. Minimal configuration: pass BrowserSync options as first argument and optional plugin options (reload, injectCss, name, callback) as second. Releases are infrequent.

devopsweb-framework
npm install browser-sync-v3-webpack-plugin
github ↗package ↗
INSTALL
IMPORT
SIG · BROWSER-SYNC-V3-WE
B
browser-sync-v3-webpack-plugin
devopsjavascriptv0.1.1
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';
Package is CommonJS only; default import does not work. Use require or ESM default interop.
new BrowserSyncPlugin()
✓ new BrowserSyncPlugin({host: 'localhost', port: 3000, server: {baseDir: ['./']}})
✗ new BrowserSyncPlugin();
Plugin requires at least an options object. If omitted, BrowserSync may fail to start.
PluginOptions
✓ const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); new BrowserSyncPlugin({proxy: 'http://localhost:8080'}, {reload: false})
✗ new BrowserSyncPlugin({proxy: 'http://localhost:8080', reload: false})
reload is a plugin option, not a BrowserSync option; must be in second argument object.

Basic setup: serves files from 'dist' directory with BrowserSync on localhost:3000 when webpack runs in watch mode.

const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, watch: true, plugins: [ new BrowserSyncPlugin({ host: 'localhost', port: 3000, server: { baseDir: ['dist'] }, }), ], };
Debug
Known issues
gotchaBrowserSync only starts when webpack runs with --watch or watch: true.
fix
Ensure webpack is in watch mode.
affects: all
gotchaThe plugin name in require is 'browser-sync-webpack-plugin', not 'browser-sync-v3-webpack-plugin'. The fork is published as the same npm package name.
fix
Use 'browser-sync-webpack-plugin' as the package name.
affects: all
deprecatedSupport for Node.js versions < 4 was dropped in v2.0.0.
fix
Upgrade Node.js to v4+ or use v1.2.0.
affects: >=2.0.0
gotchaWhen using the proxy option, ensure 'reload: false' is set in plugin options to avoid double reloads.
fix
Pass { reload: false } as second argument to BrowserSyncPlugin.
affects: all
gotchaThe 'injectCss' plugin option only works when changed chunks are all CSS files; otherwise page reloads.
fix
Set injectCss: true only if you expect CSS-only changes.
affects: all
Errors
Common errors & fixes
Error: Cannot find module 'browser-sync-webpack-plugin'
Package not installed.
fix
Run npm install --save-dev browser-sync-webpack-plugin
TypeError: BrowserSyncPlugin is not a constructor
Incorrect import style (e.g., using ES6 default import default).
fix
Use const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
Error: The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Webpack v4+ requires mode to be set explicitly.
fix
Set mode: 'development' in webpack config.
Error: connect ECONNREFUSED 127.0.0.1:3100
When using proxy option, Webpack Dev Server is not running on the expected port.
fix
Start Webpack Dev Server first on the port you proxy (e.g., port 3100).
Upgrade
Version history
0.1.1latest on npm
Audit
Dependencies
browser-syncrequiredPeer dependency: required to run BrowserSync server
webpackrequiredPeer dependency: Webpack plugin
Agent activity
7 hits · last 30 days
node
6
OpenAI (training)
1
Resources
githubhttps://github.com/madbucket/browser-sync-webpack-plugin ↗
packagehttps://www.npmjs.com/package/browser-sync-v3-webpack-plugin ↗
browser-sync-v3-webpack-plugin — npm install browser-sync-v3-webpack-plugin · libregistry