{"id":17518,"library":"browsersync-webpack-plugin","title":"BrowserSync Webpack Plugin","description":"The `browsersync-webpack-plugin` package provides a bridge to integrate BrowserSync with Webpack projects, particularly useful for development workflows. It aims to simplify the setup of live reloading and synchronized browser testing by combining BrowserSync's features with Webpack's build process, often alongside `webpack-dev-middleware` and `webpack-hot-middleware`. The provided version, `0.6.0`, was published in April 2018. The package itself appears to be largely unmaintained or abandoned, with the last code commit and NPM publish occurring approximately six years ago. This makes it unsuitable for modern Webpack 5+ setups and potentially incompatible with newer Node.js versions or recent BrowserSync releases. Users should be aware of its inactive status and consider alternatives for contemporary projects. It differentiates itself by offering a direct plugin approach to embed BrowserSync into Webpack's lifecycle, rather than configuring BrowserSync manually to proxy a `webpack-dev-server` instance.","status":"abandoned","version":"0.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/qwp6t/browsersync-webpack-plugin","tags":["javascript"],"install":[{"cmd":"npm install browsersync-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add browsersync-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add browsersync-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for BrowserSync functionality. The plugin wraps an instance of BrowserSync.","package":"browser-sync","optional":false}],"imports":[{"note":"The plugin exports a default class, so use a default import or CommonJS require. Named imports will fail.","wrong":"import { BrowserSyncPlugin } from 'browsersync-webpack-plugin';","symbol":"BrowserSyncPlugin","correct":"import BrowserSyncPlugin from 'browsersync-webpack-plugin';\n// or\nconst BrowserSyncPlugin = require('browsersync-webpack-plugin');"},{"note":"The first argument to the constructor is an object containing standard BrowserSync options. Ensure it's a single object literal.","wrong":"new BrowserSyncPlugin('localhost', 3000, { server: { baseDir: ['public'] } });","symbol":"plugin options (BrowserSync options)","correct":"new BrowserSyncPlugin({\n  host: 'localhost',\n  port: 3000,\n  server: { baseDir: ['public'] }\n});"},{"note":"When proxying `webpack-dev-server`, BrowserSync options are the first argument, and `reload: false` (to let Webpack handle HMR) is passed in a *second* options object.","wrong":"new BrowserSyncPlugin({ proxy: 'http://localhost:8080/', reload: false });","symbol":"plugin options (Webpack Dev Server proxy)","correct":"new BrowserSyncPlugin(\n  { proxy: 'http://localhost:8080/' }, // BrowserSync options\n  { reload: false } // Plugin specific options\n);"}],"quickstart":{"code":"const path = require('path');\nconst webpack = require('webpack');\nconst BrowserSyncPlugin = require('browsersync-webpack-plugin');\nconst webpackDevMiddleware = require('webpack-dev-middleware');\nconst webpackHotMiddleware = require('webpack-hot-middleware');\n\nmodule.exports = {\n  mode: 'development',\n  entry: [\n    'webpack-hot-middleware/client?reload=true', // HMR client\n    './src/index.js'\n  ],\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n    publicPath: '/dist/' // Crucial for webpack-dev-middleware\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: ['babel-loader']\n      }\n    ]\n  },\n  plugins: [\n    new webpack.HotModuleReplacementPlugin(),\n    new webpack.NoEmitOnErrorsPlugin(), // Good practice with HMR\n    new BrowserSyncPlugin(\n      // BrowserSync options\n      {\n        host: 'localhost',\n        port: 3000,\n        proxy: 'http://localhost:8080/', // Proxy Webpack Dev Server\n        open: false // Prevent BrowserSync from opening a new browser tab automatically\n      },\n      // plugin options\n      { reload: false } // Let Webpack Dev Server handle reloads\n    )\n  ],\n  devServer: {\n    port: 8080, // Webpack Dev Server port\n    hot: true,\n    static: { // Or `contentBase` for Webpack 4 and earlier\n      directory: path.join(__dirname, 'public'),\n    },\n    // This devServer config might be ignored when running via custom server and middleware\n    // The middleware approach below takes precedence\n  }\n};\n\n// To run this setup, you typically need a custom Node.js server (e.g., Express).\n// A simplified `server.js` for illustration:\n/*\nconst express = require('express');\nconst webpack = require('webpack');\nconst webpackConfig = require('./webpack.config.js');\nconst compiler = webpack(webpackConfig);\nconst app = express();\n\napp.use(webpackDevMiddleware(compiler, {\n  publicPath: webpackConfig.output.publicPath,\n  stats: { colors: true }\n}));\n\napp.use(webpackHotMiddleware(compiler));\n\n// Serve static assets from 'public' if not proxied\napp.use(express.static(path.join(__dirname, 'public')));\n\nconst PORT = process.env.PORT || 8080;\napp.listen(PORT, () => {\n  console.log(`Webpack Dev Server listening on port ${PORT}`);\n});\n*/","lang":"javascript","description":"This `webpack.config.js` demonstrates how to integrate `browsersync-webpack-plugin` with `webpack-dev-middleware` and `webpack-hot-middleware` using a proxy setup."},"warnings":[{"fix":"Migrate to a maintained alternative like `webpack-dev-server` with `browser-sync` used as a proxy manually configured, or find a more recent, actively maintained BrowserSync Webpack integration plugin if available. For Webpack 5+, `webpack-dev-server` handles HMR directly and is often sufficient.","message":"The package `browsersync-webpack-plugin` is abandoned and has not been updated since April 2018. It is highly unlikely to be compatible with Webpack 5+ due to significant internal changes in Webpack's plugin API and Node.js polyfills. Using it with modern Webpack versions will likely lead to build failures or unexpected behavior.","severity":"breaking","affected_versions":">=1.0.0 (Webpack versions)"},{"fix":"Ensure you install a compatible `browser-sync` version (e.g., `npm install browser-sync@^2.18.8`). Be aware that pinning to an old version might introduce security vulnerabilities or incompatibilities with your Node.js runtime.","message":"This plugin requires `browser-sync` as a peer dependency, but it specifies an old version range (`^2.18.8`). Newer versions of `browser-sync` (e.g., v3+) may introduce breaking changes or different API behaviors that are not accounted for by this abandoned plugin, leading to runtime errors or unexpected behavior.","severity":"gotcha","affected_versions":">=0.6.0 (browsersync-webpack-plugin)"},{"fix":"For new projects, prefer using `webpack-dev-server` directly for development, which offers robust HMR and live reloading. If BrowserSync features (like UI, external device sync, or proxying to multiple backends) are essential, configure `browser-sync` to proxy the `webpack-dev-server` output manually.","message":"The plugin's approach of integrating `webpack-dev-middleware` and `webpack-hot-middleware` directly into a BrowserSync instance via a separate plugin is largely superseded by modern `webpack-dev-server` capabilities, which include built-in HMR since v4.0.0.","severity":"deprecated","affected_versions":">=0.6.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Change the import statement to `import BrowserSyncPlugin from 'browsersync-webpack-plugin';` for ES Modules or `const BrowserSyncPlugin = require('browsersync-webpack-plugin');` for CommonJS.","cause":"Attempting to use `import { BrowserSyncPlugin } from 'browsersync-webpack-plugin'` instead of a default import or CommonJS require for the class.","error":"TypeError: BrowserSyncPlugin is not a constructor"},{"fix":"Install the peer dependency: `npm install browser-sync` or `yarn add browser-sync`. Check `package.json` for the expected version range.","cause":"The `browser-sync` package is a peer dependency and was not installed alongside `browsersync-webpack-plugin`.","error":"Error: Cannot find module 'browser-sync'"},{"fix":"Ensure `output.publicPath` in `webpack.config.js` matches the path where your bundled assets are expected to be served. Verify `webpackDevMiddleware` is configured with the correct `publicPath`. When proxying, ensure BrowserSync's `proxy` option points to the correct `webpack-dev-server` address and port. If using a static server, `server.baseDir` must point to the directory containing your static files.","cause":"Incorrect configuration of `publicPath` in Webpack output, `webpack-dev-middleware` or `webpack-hot-middleware` not properly integrated, or BrowserSync options (like `proxy` or `server.baseDir`) are misconfigured.","error":"BrowserSync not starting or HMR/live reload not working in browser"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}