Customize webpack DevServer message

Question

Currently, when I start my Webpack DevServer, it outputs this message:

i ｢wds｣: Project is running at http://localhost:8080/

Is it possible to somehow customize the url in message to my current project path, which is in my case: http://localhost:8080/myProject . The motivation behind that is, that now I need to add myProject to browser url bar when the project starts.

Answer 1

Well, as stated in the comments there is no option to customize just the message and of course you can use the open property. Although you can always overwrite the internal log function that Webpack DevServer uses.

devServer: {
  before: function(app, server) {
    let _info = server.log.info;
    server.log.info = (...args) => {
      return _info(...(args.map(s => typeof s === 'string' ?
        s.replace(/(http:\/\/localhost:8080\/)/, '$1myProject') :
        s
      )));
    }
  }
}

That way every message will pass first from this "proxy" function, and if http://localhost:8080 is found as part of the message it will be replaced with http://localhost:8080/myProject . Of course it can be customized further to handle different ports and hostname but I think is good enough to solve this visual issue!