Webpack launch browser automatically

Question

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
}

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.

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.

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",
    ...
  },

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",
   //...
  }

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.

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);