Choose which browser Webpack opens?

Question

I installed Vue.js using the CLI as found here :

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

When I run it opens Safari, my default browser. I would like to specify Chrome (used only for development) without changing the OS default browser.

The webpack.dev.conf.js is as follows:

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin()
  ]
})

Anybody know how to specify Chrome in this configuration?

Answer 1

There is already a issue assigned for it on github but it's still under development.

Issue Link

Update

The issue finally got merged. Now you can specify the browser using CLI or webpack.dev.conf.

1. Using CLI "start": "webpack-dev-server --config webpack.dev.js --open chrome"

2. Using webpack.config.js:

    module.exports = { //... devServer: { open: 'Google Chrome' } };

   Documentation Link

Answer 2

For DevServer v4.0.0+

webpack.config.json

{
  // ...
  devServer:
  {
    open:
    {
      app:
      {
        name: 'firefox'
      }
    }
  },
  // ...
}

CLI

npx webpack serve --open-app-name 'firefox'

• https://webpack.js.org/configuration/dev-server/#devserveropen

Answer 3

For vue-cli 5.04, the only version that seems to work currently is in vue.config.js

module.exports = defineConfig({
    devServer: {
        open: {
            app: {
                name: 'opera',
            }
        }
    },
});

however

vue-cli-service serve --open-app-name 'opera' 

does not work.