{"id":19392,"library":"browser-sync-v3-webpack-plugin","title":"BrowserSync Webpack Plugin (v3 fork)","description":"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.","status":"active","version":"0.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/madbucket/browser-sync-webpack-plugin","tags":["javascript","webpack","webpack-plugin","browsersync","browser-sync","livereload","serve"],"install":[{"cmd":"npm install browser-sync-v3-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add browser-sync-v3-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add browser-sync-v3-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: required to run BrowserSync server","package":"browser-sync","optional":false},{"reason":"Peer dependency: Webpack plugin","package":"webpack","optional":false}],"imports":[{"note":"Package is CommonJS only; default import does not work. Use require or ESM default interop.","wrong":"import BrowsersyncPlugin from 'browser-sync-webpack-plugin';","symbol":"BrowserSyncPlugin","correct":"const BrowserSyncPlugin = require('browser-sync-webpack-plugin');"},{"note":"Plugin requires at least an options object. If omitted, BrowserSync may fail to start.","wrong":"new BrowserSyncPlugin();","symbol":"new BrowserSyncPlugin()","correct":"new BrowserSyncPlugin({host: 'localhost', port: 3000, server: {baseDir: ['./']}})"},{"note":"reload is a plugin option, not a BrowserSync option; must be in second argument object.","wrong":"new BrowserSyncPlugin({proxy: 'http://localhost:8080', reload: false})","symbol":"PluginOptions","correct":"const BrowserSyncPlugin = require('browser-sync-webpack-plugin');\nnew BrowserSyncPlugin({proxy: 'http://localhost:8080'}, {reload: false})"}],"quickstart":{"code":"const BrowserSyncPlugin = require('browser-sync-webpack-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  watch: true,\n  plugins: [\n    new BrowserSyncPlugin({\n      host: 'localhost',\n      port: 3000,\n      server: { baseDir: ['dist'] },\n    }),\n  ],\n};","lang":"javascript","description":"Basic setup: serves files from 'dist' directory with BrowserSync on localhost:3000 when webpack runs in watch mode."},"warnings":[{"fix":"Ensure webpack is in watch mode.","message":"BrowserSync only starts when webpack runs with --watch or watch: true.","severity":"gotcha","affected_versions":"all"},{"fix":"Use 'browser-sync-webpack-plugin' as the package name.","message":"The 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.","severity":"gotcha","affected_versions":"all"},{"fix":"Upgrade Node.js to v4+ or use v1.2.0.","message":"Support for Node.js versions < 4 was dropped in v2.0.0.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Pass { reload: false } as second argument to BrowserSyncPlugin.","message":"When using the proxy option, ensure 'reload: false' is set in plugin options to avoid double reloads.","severity":"gotcha","affected_versions":"all"},{"fix":"Set injectCss: true only if you expect CSS-only changes.","message":"The 'injectCss' plugin option only works when changed chunks are all CSS files; otherwise page reloads.","severity":"gotcha","affected_versions":"all"}],"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-webpack-plugin","cause":"Package not installed.","error":"Error: Cannot find module 'browser-sync-webpack-plugin'"},{"fix":"Use const BrowserSyncPlugin = require('browser-sync-webpack-plugin');","cause":"Incorrect import style (e.g., using ES6 default import default).","error":"TypeError: BrowserSyncPlugin is not a constructor"},{"fix":"Set mode: 'development' in webpack config.","cause":"Webpack v4+ requires mode to be set explicitly.","error":"Error: The 'mode' option has not been set, webpack will fallback to 'production' for this value."},{"fix":"Start Webpack Dev Server first on the port you proxy (e.g., port 3100).","cause":"When using proxy option, Webpack Dev Server is not running on the expected port.","error":"Error: connect ECONNREFUSED 127.0.0.1:3100"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}