Skip to content

mickeahlinder/webpack-browser-plugin

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm version npm

Webpack Browser Plugin

This plugin enables your webpack builds to automatically launch it's application on a browser.

Will automatically work for webpack-dev-server. For standard webpack usage -- browser sync is used to launch the application on a specific port.

Installation

npm install --save-dev webpack-browser-plugin

Setup

In webpack.config.js:

const WebpackBrowserPlugin = require('webpack-browser-plugin');

module.exports = {
  ...
  ...
  plugins: [
    new WebpackBrowserPlugin()
  ],
  ...
}

Example

You can specify a port and a browser to be used.

const WebpackBrowserPlugin = require('webpack-browser-plugin');

var plugins = [];

plugins.push(new WebpackBrowserPlugin({
  browser: 'Firefox',
  port: 9000,
  url: 'http://192.168.3.1'
}));

var config = {
  entry: {
    app: __dirname + 'src/pantera.js'
  },
  output: {
    path: __dirname + 'dest'
  },
  devServer: {
    contentBase: __dirname + 'dest'
  },
  plugins: plugins,
  module: {
    loaders: [
      {test: /\.js$/, loaders: 'babel'},
      {test: /\.scss$/, loader: 'style!css!scss?'},
      {test: /\.html$/, loader: 'html-loader'}
    ]
  }
}

module.exports = config;

Note: For webpack, browser-sync is being used. For webpack-dev-server a child process spawns the browser popup. Also ports get overwritten if specified in webpack.config.js for webpack-dev-server.

Other Webpack Plugins

Also checkout our other webpack plugin WebpackShellPlugin.

API

  • port: Port to run on. Default: 8080
  • browser: Browser to use. Note: webpack-dev-server will open your default browser. Default: default <string|array>
  • url: Url to use. Default: http://127.0.0.1 or http://localhost

Webpack-dev-server only

  • openOptions: For webpack-dev-server, we use node module opn. This will override this plugins options.

Contributing

Create a new branch and write your changes in the src/ folder.

Make sure you run your tests with both webpack and webpack-dev-server.

Once complete run npm run build and create your pull request.

About

Launch your app after webpack completes building.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.9%
  • HTML 1.5%
  • CSS 0.6%