open-browser-webpack-plugin

0.0.5 verified Sat Apr 25 auth: no javascript deprecated

Opens a new browser tab when Webpack finishes its first compilation. Current stable version is 0.0.5 (released March 2017). No recent updates; plugin uses the webpack 'done' hook and relies on the 'open' npm package under the hood. It is more limited than alternatives like open-browser-webpack-plugin or webpack-open-plugin, with no support for Webpack 4+ hooks or multi-compiler mode. Suitable only for simple single-compiler Webpack 1-3 setups.

Common errors

error TypeError: Cannot read property 'compiler' of undefined ↓

cause Plugin used with webpack 4+ or in multi-compiler mode without proper hook support.

fix

Use a webpack 4+ compatible plugin like open-browser-webpack-plugin.

error Error: Module not found: Error: Can't resolve 'open-browser-webpack-plugin' ↓

cause Package not installed or incorrect import path.

fix

Run: npm install open-browser-webpack-plugin --save-dev

error The 'open' module is required but not found ↓

cause Missing dependency 'open' (optional peer dependency).

fix

Run: npm install open@0.0.5

Warnings

deprecated Package is unmaintained since 2017; no Webpack 4+ support. ↓

fix Use open-browser-webpack-plugin (2.x) or webpack-open-plugin instead.

breaking Version 0.0.4 fixed an issue where other Webpack callbacks were removed; upgrade from 0.0.3. ↓

fix Update to >=0.0.4

gotcha The url option must include http:// or https:// prefix, otherwise the browser won't open. ↓

fix Set url to 'http://localhost:3000' (with protocol).

gotcha Plugin only opens browser on first compilation; subsequent rebuilds (e.g., with webpack-dev-server) will not re-open. ↓

fix Use webpack-dev-server's built-in open option or a dev-server plugin.

deprecated Uses older webpack plugin API (apply method with compiler.plugin); incompatible with webpack 5. ↓

fix Migrate to a newer plugin or use webpack 5 compatible alternative.

Install

npm install open-browser-webpack-plugin

yarn add open-browser-webpack-plugin

pnpm add open-browser-webpack-plugin

Imports

OpenBrowserPlugin
wrong
```
import OpenBrowserPlugin from 'open-browser-webpack-plugin';
```
correct
```
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
```
Package does not export ESM; CommonJS require is required. For webpack 4+ use plugins like open-browser-webpack-plugin or webpack-open-plugin.

OpenBrowserPlugin

wrong

const { OpenBrowserPlugin } = require('open-browser-webpack-plugin');

correct

const OpenBrowserPlugin = require('open-browser-webpack-plugin');

It is a default export, not named.

OpenBrowserPlugin

wrong

new OpenBrowserPlugin('http://localhost:3000')

correct

new OpenBrowserPlugin({ url: 'http://localhost:3000' })

Options must be passed as an object. The url property is required.

Quickstart

Shows how to add the plugin to a Webpack 1-3 config; opens browser at localhost:8080 on first compile.

const path = require('path');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ]
};