CODEWITHSUNDEEP
webpack-dev-serverwebpack-2
ruby huang
ruby huang

Reputation: 61

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

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.

Upvotes: 6

Views: 9843

Answers (5)

fyalavuz
fyalavuz

Reputation: 129

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/

Upvotes: 0

Zach Smith
Zach Smith

Reputation: 8961

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

Upvotes: 7

suninthefield
suninthefield

Reputation: 11

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

Upvotes: 1

elopezp
elopezp

Reputation: 627

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

Upvotes: 4

Luca Ritossa
Luca Ritossa

Reputation: 1185

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' })
  ]
};

Upvotes: 2

Related Questions