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

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

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

Answer 5

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 6

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
}