set the url automatically opened in browser with webpack-dev-server in webpack2

Question

Can I custom the url that be automatically opened in browser? I found there is no api for that? Since that there is not a index under the project root, but the default url is localhost:8080. Or in the condition that I want to debug the page being developing.

Answer 1

September 2021 (webpack 5)

From the documentation: https://webpack.js.org/configuration/dev-server/#devserveropen

In the dev server config

{
  ...,
  host: '0.0.0.0',
  open: ['http://locahost:3001']
  ...
}

(and remove the --open flag from the webpack serve command

Answer 2

You can configure you webpack.config.js like this:

 entry: __dirname + '/src/index.js',
 output: {
    path: path.join(__dirname, 'static'),,
    filename: "bundle.js",
    publicPath: "/static/dist/"
  },
  devServer: {
    publicPath: '/static/dist/',
    open: true, 
    openPage: 'static/dist/somefile.html' 
  },...

The important thing here is devServer.open and devServer.openPage. You have to enable devServer.open and set your custom url in devServer.openPage to open first in your devServer. My configuration in package.json:

"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production",
"dev": "webpack --mode development"
},...

Finally run it by:

npm run start

Hope it helps. Regards

Answer 3

You can try with this plugin: Open Browser Webpack Plugin

Follow this steps...

1. First of all install the plugin:

   npm install open-browser-webpack-plugin --save-dev

2. Remove the --open option from package.json or the open: true option from webpack.config.js, devServer configuration or the open: true in your webpack.config.js

3. Now you need to require and configure the plugin into webpack.config.js

   var OpenBrowserPlugin = require('open-browser-webpack-plugin');`
   
   module.exports = {
     ...
     ...
     ...
     plugins: [
       new OpenBrowserPlugin({ url: 'http://localhost:3000/mycustompath' })
     ]
   };
   

Answer 4

devServer: { open: true, openPage: 'oa' /* when browser open this */ }

Answer 5

my solution without any plugins

modify your package.json file, like below code shows

1. macOS / Linux

{
  "scripts": {
    "dev": "open http://localhost:8080 && webpack --config webpack.config.js",
  }
}

2. Windows

{
  "scripts": {
    "dev": "start http://localhost:8080 && webpack --config webpack.config.js",
  }
}

3. webpack-dev-server

{
  "scripts": {
    "dev": "webpack-dev-server --open --config webpack.config.js",
  }
}

refs

https://webpack.js.org/configuration/dev-server/

https://webpack.js.org/guides/development/#using-webpack-dev-server

https://www.cnblogs.com/xgqfrms/p/12858667.html

Webpack launch browser automatically

Answer 6

To open a specified page in a browser:

webpack.config.js

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

Usage via the CLI:

npx webpack serve --open /my-page

You can find this section https://webpack.js.org/configuration/dev-server/