Display url of app entry file to user after webpack-dev-server start

[filoxo]

I had a minor idea but I'm not sure how much value it provides so I'm sharing it here for feedback. I think the base Webpack config could display the url of the app entry file to the user after webpack-dev-server has started. Currently one would have to extrapolate this from places in webpack's output. Here's a more concrete example of what I mean:

In the above, the entry file can be extrapolated from the two lines that I've highlighted. But its a lot to parse through (which is unfriendly to both beginners and experienced devs) and requires having to copy and paste twice. We could fairly easily add a line that logs with that URL already displayed.

Note the 4th line after the command has started. Many terminals also allow the user to CMD+click URLs to open them up immediately. Here is my naive implementation:

devServer: {
  after: (app, server, compiler) => {
    const { https = false, host, port, publicPath, filename } = compiler.options.devServer;
    console.log(`⚡️ single-spa application entry: \x1b[36m%s\x1b[0m`, `${https ? "https://" : "http://"}${host}${!!port ? `:${port}` : ""}${publicPath}${filename}`)
  }
}

This could be taken a step further into showing the type of application (eg root-config running at: https://localhost:4321/index.html), framework, or other configuration info that might helpful.

[joeldenning]

I think this is a great idea and would really help people.

[filoxo]

I had originally implemented this with webpack devServer's after but I think that onListening is probably a better hook to use.

[filoxo]

Example of this working with Webpack 5 https://github.com/filoxo/single-spa-example-webpack-lazystyletag/blob/main/webpack.config.js#L43-L54