Webpack dev server 4.0.0 option `open` doens't work

user_5290519 0
Viewed 1346

This is my webpack.config.js. With this setting the liveReload works(since by defualt it's true) while open: true didn't. When I run ./node_modules/.bin/webpack serve, the browser doesn't opened automatically for me.

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                },
            }
        ]
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        open: {
            app: {
                name: "edge",
            }
        },
        port: 3003,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            inject: 'head',
            scriptLoading: 'defer'
        })
    ]
}

here is the console message:

> official-docs@1.0.0 server
> ./node_modules/.bin/webpack serve

(node:97874) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:97874) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use async 'start' or 'startCallback' methods.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://MY_IP:3000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[MY_IP2]:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'MY_PATH/babel-practice/official-docs/dist' directory
asset bundle.js 1 MiB [emitted] (name: main)
asset index.html 266 bytes [emitted]
runtime modules 27 KiB 13 modules
modules by path ./node_modules/core-js/ 252 KiB
  modules by path ./node_modules/core-js/internals/*.js 122 KiB 145 modules
  modules by path ./node_modules/core-js/modules/*.js 129 KiB 64 modules
modules by path ./node_modules/webpack-dev-server/client/ 50.7 KiB 12 modules
modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
./src/index.js 3.1 KiB [built] [code generated]
./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
./node_modules/ansi-html/index.js 4.16 KiB [built] [code generated]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
webpack 5.48.0 compiled successfully in 974 ms
webpack-dev-server webpack
1 Answers

You have to pass in some additional options, arguments and (optionally) target. From the Migration Guide:

v3:

module.exports = {
  devServer: {
    // openPage: '/my-page',
    openPage: true,
  },
};

v4:

module.exports = {
  devServer: {
    // open: ['/my-page'],
    open: true,
  },
};

module.exports = {
  devServer: {
    open: {
      target: ["first.html", `http://localhost:8080/second.html`],
      app: {
        name: "google-chrome",
        arguments: ["--incognito", "--new-window"],
      },
    },
  },
};

When I specified the browser as firefox (instead of edge, as in your example), and added arguments: ["--new-window"], I was able to get the functionality working

user_64257200
Related