{"id":19391,"library":"browser-sync-webpack-plugin","title":"BrowserSync Webpack Plugin","description":"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.","status":"active","version":"2.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/Va1/browser-sync-webpack-plugin","tags":["javascript","webpack","webpack-plugin","browsersync","browser-sync","livereload","serve"],"install":[{"cmd":"npm install browser-sync-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add browser-sync-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add browser-sync-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: required to run BrowserSync server","package":"browser-sync","optional":false},{"reason":"Peer dependency: plugin is used within Webpack build","package":"webpack","optional":false}],"imports":[{"note":"CommonJS is the traditional pattern; ESM may not work depending on Node module resolution. Use require() for compatibility.","wrong":"import BrowserSyncPlugin from 'browser-sync-webpack-plugin'","symbol":"BrowserSyncPlugin","correct":"const BrowserSyncPlugin = require('browser-sync-webpack-plugin')"},{"note":"The package exports a single constructor as default. Named import will be undefined.","wrong":"import { BrowserSyncPlugin } from 'browser-sync-webpack-plugin'","symbol":"Default export (as plugin)","correct":"import BrowserSyncPlugin from 'browser-sync-webpack-plugin'"},{"note":"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.","wrong":"import { BrowserSyncPlugin } from 'browser-sync-webpack-plugin'","symbol":"TypeScript type (if needed)","correct":"import BrowserSyncPlugin from 'browser-sync-webpack-plugin'"}],"quickstart":{"code":"// webpack.config.js\nconst BrowserSyncPlugin = require('browser-sync-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: { path: __dirname + '/dist', filename: 'bundle.js' },\n  plugins: [\n    new BrowserSyncPlugin({\n      host: 'localhost',\n      port: 3000,\n      server: { baseDir: ['dist'] }\n    })\n  ]\n};","lang":"javascript","description":"Shows basic usage of BrowserSyncPlugin with Webpack watch mode; starts a local server serving 'dist' directory on port 3000."},"warnings":[{"fix":"Set `injectCss: true` in plugin options to enable CSS injection without reload.","message":"Plugin will not automatically inject CSS changes unless `injectCss: true` option is set. Default behavior is full page reload.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Use Node >=4. For older Node, use version 1.2.0.","message":"Node v3 and lower support dropped in version 2.0.0.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure you run webpack with --watch flag.","message":"BrowserSync only starts when Webpack runs in watch mode (`webpack --watch`). Build once without watch will not start BrowserSync.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pass `{ reload: false }` as second argument to BrowserSyncPlugin constructor.","message":"When using with Webpack Dev Server, you must set `reload: false` to prevent double reloading.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install `browser-sync` as a devDependency with version 2.x or 3.x.","message":"The plugin expects BrowserSync v2 or v3. Make sure you have compatible version installed.","severity":"gotcha","affected_versions":">=2.4.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install --save-dev browser-sync","cause":"browser-sync is a peer dependency and not installed automatically.","error":"Error: Cannot find module 'browser-sync'"},{"fix":"Use const BrowserSyncPlugin = require('browser-sync-webpack-plugin') or import BrowserSyncPlugin from 'browser-sync-webpack-plugin'","cause":"Incorrect import (using named import instead of default).","error":"TypeError: BrowserSyncPlugin is not a constructor"},{"fix":"Remove webpack.optimize.OccurrenceOrderPlugin and use default optimization in webpack.config.js.","cause":"Using old plugin options with Webpack 4+.","error":"Error: webpack.optimize.OccurrenceOrderPlugin is not a plugin"},{"fix":"Ensure you are not accidentally running browser-sync on server-side without proper configuration.","cause":"Running BrowserSync inside Node environment (not relevant to plugin directly).","error":"ReferenceError: window is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}