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

Answer 1

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