Webpack launch browser automatically

Question

Gulp + live reload serves up my content on localhost and (here's what I'm after) launches the browser automatically at the server url whenever i run the gulp command (i.e I don't have to click the browser icon and navigate to the url manually). Can this be done in Webpack too?

I've tried a plugin called open-browser-webpack-plugin, but I could not get it to work.

Answer 1

For webpack version 2.x, you just add --open open to the CLI as documented here:

https://webpack.js.org/configuration/dev-server/#devserver-open

Alternatively, add the following config to your webpack.config.js:

devServer: {
  open: true
}

Answer 2

Emelet answer is not false at all, however it won't work in Windows. I do this with:

"scripts": {
    "start": "start http://localhost:8000/ & webpack-dev-server"
}

100% working and you don't have to install any module or plugin.

Answer 3

For those using Node.js (and npm): put the command in the npm start script:

MAC

"scripts": {
    "start": "webpack-dev-server & open http://localhost:8080/"
  }

WINDOWS

"scripts": {
    "start": "start http://localhost:8000/ & webpack-dev-server"
}

Thanks to Enzo Ferey for pointing out that the command needs to look different when on Windows.

Answer 4

To launch the browser, one can add --open to CLI command as the accepted answer points it out

npm start --open

or

ng serve --open

To avoid doing it all the time: there is a simple change to make in package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    ...
  },

Answer 5

In a previous comment, I noted that the currently accepted answer does work but it has the side effect of spawning a process that needs to be manually killed. I've since figured out the more canonical way of initiating a browser open action without using a separate webpack plugin.

That said, you do need to install a more general npm package: open

Then create a new file at your project folder named server.js. Here's a sample implementation (note that it is in ES6):

'use strict';
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');


const open = require('open');
const port_number = 8080;

let target_entry = 'http://localhost:' + port_number + '/';
config.entry.unshift("webpack-dev-server/client?" + target_entry);

new WebpackDevServer(webpack(config), {contentBase: 'src', hot: true, stats: { colors: true }, publicPath: '/assets/'})
.listen(port_number, 'localhost' , (err) => {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:' + port_number );
  console.log('Opening your system browser...');
  open(target_entry);
});

Note that this line:

config.entry.unshift("webpack-dev-server/client?" + target_entry);

-- Means you can remove the call to webpack-dev-server/client?... from webpack.config.js, as this unshift command will insert the line into config.entry...this is a helpful modularization for when you need to set up an app with multiple environments and different entry points.

Finally, in package.json, this is what the start command should look like: a call to node to run server.js:

  "scripts": {
    "start": "node server.js",
   //...
  }

Answer 6

directory/folder: package.json

{
  "devDependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "webpack": "^4.16.0",
  "webpack-dev-server": "^3.1.4"
},
  "name": "",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "description": "",
  "author": "",
  "private": false,
  "scripts": {
    "start": "webpack-dev-server --open --watch"
 },
  "dependencies": {
    "webpack-cli": "^3.0.8"
  }
}

This start script will run the dev server, and both automatically open and update (on-save) the web page. This is for WebPack 4.

Answer 7

Ive had success using BrowserSync with webpack.

In webpack.config.js I include this:

var options = {
    port: 9001,
    host: 'localhost',
    server: {
        baseDir: './public'
    },
    ui: {
        port: 9002
    },
    startPath: process.argv[3].substr(2),
}

var browserSync = require('browser-sync');
browserSync(['public/**/*.*'],options);

Answer 8

Launch browser automatically and it is also possible to specify a page when opening the browser with webpack 4.

"scripts": {
   ...
   "start": "webpack-dev-server --open-page index2.html"
}

Answer 9

Currently, I'm using the latest webpack version but the configuration still the same and it works for me. Add new attribute open: true at your webpack devServer configuration. It looks like

module.exports = {
  entry: ...,
  module: { ... },
  ...
  devServer: {
    ...
    open: true,
    ...
  },
};

Answer 10

The latest webpack dev server syntax for specifying a different browser rather than the default one is the following:

devServer: {
...
  open: {
    app: {
      name: 'google-chrome'
    }
  }
}

The name key will vary based on the OS per specification in the open package app options docs.

Answer 11

You can configure devServer

const merge = require('webpack-merge');
const common = require('./webpack.base.config.js');
const path = require('path');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000,
    hot:true,
    compress: true,
    open:"Chrome",
    openPage:'index.html'
  },
});

Answer 12

Accepted answer will work but it will open your browser will even when compiled bundles arent ready, as mentioned in the comments. Following approach solves this problem:

    const { WebpackOpenBrowser } = require('webpack-open-browser'); // use any plugin to open browser

    const PORT = 8080;

    devServer: {
      open: false
    }
    
    plugins: [
      ...
      new WebpackOpenBrowser({ url: `http://localhost:${PORT}`}),
    ]