WebpackOpenBrowser

2.0.2 verified Sat Apr 25 auth: no javascript

Webpack plugin to automatically open a browser when webpack's dev server starts. Current stable version is 2.0.2, supports webpack >=4.0.0 <6.0.0. Uses the 'open' package for cross-platform browser launching, including incognito mode via arguments. Differentiators: supports multiple URLs/browsers via array config, delay option, ignore errors option, and includes built-in cross-platform browser name constants for Chrome, Firefox, and Edge. The package ships TypeScript types.

Common errors

error Cannot find module 'webpack-open-browser' ↓

cause Package not installed or not in node_modules.

fix

Run npm install webpack-open-browser --save-dev.

error TypeError: WebpackOpenBrowser is not a constructor ↓

cause Using a default import when the package only exports named exports.

fix

Use const { WebpackOpenBrowser } = require('webpack-open-browser');

error The provided value 'chrome' is not a valid browser from 'apps'. ↓

cause On MacOS, 'chrome' is not a recognized application name.

fix

Use apps.chrome or 'Google Chrome' (full application name) for MacOS.

Warnings

breaking In v2.0.0, the import path changed from default export to named export. If still using 'const WebpackOpenBrowser = require('webpack-open-browser').default' it will break. ↓

fix Use const { WebpackOpenBrowser } = require('webpack-open-browser') or import { WebpackOpenBrowser } from 'webpack-open-browser'.

gotcha The browser option is platform-dependent. Using 'chrome' on MacOS won't work; use 'Google Chrome' or apps.chrome instead. ↓

fix Use apps.chrome (cross-platform) or the full application name for your OS (e.g., 'Google Chrome' on Mac, 'chrome' on Windows).

gotcha The plugin only works by default when there are no compilation errors. If errors exist, the browser won't open. ↓

fix Set the option ignoreErrors: true to open the browser even if there are compilation errors.

deprecated Passing plugins as array elements with new keyword for each option group is the only supported syntax. There is no deprecated usage. ↓

fix N/A

Install

npm install webpack-open-browser

yarn add webpack-open-browser

pnpm add webpack-open-browser

Imports

WebpackOpenBrowser
wrong
```
import WebpackOpenBrowser from 'webpack-open-browser'
```
correct
```
import { WebpackOpenBrowser } from 'webpack-open-browser'
```
Named export, not default. In CJS use const { WebpackOpenBrowser } = require('webpack-open-browser'). Since v2.0.0 ESM is supported.
apps
wrong
```
const apps = require('webpack-open-browser').apps
```
correct
```
import { apps } from 'webpack-open-browser'
```
the apps object is a named export containing browser constants like apps.chrome, apps.firefox, apps.edge.
type WebpackOpenBrowserOptions
```
import type { WebpackOpenBrowserOptions } from 'webpack-open-browser'
```
TypeScript type export available since v2.0.0. Use for type-checking options.

Quickstart

Demonstrates the minimal setup: import the plugin and add it to the plugins array with a URL.

// webpack.config.js
const { WebpackOpenBrowser } = require('webpack-open-browser');

module.exports = {
  plugins: [
    new WebpackOpenBrowser({ url: 'http://localhost:3000' }),
  ],
};