feat: support custom loginfo with server mode (#520)

* feat: support custom loginfo with server mode

* fix: change logInfo to analyzerUrl & change some logic

* docs: update CHANGELOG

* docs: update README

* docs: Tweak analyzerUrl changelog entry

Co-authored-by: Vesa Laakso <482561+valscion@users.noreply.github.com>

CHANGELOG.md

@@ -12,6 +12,9 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 ## UNRELEASED
 
+* **New Feature** 
+  * Support outputting different URL in server mode ([#520](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/520) by [@southorange1228](https://github.com/southorange1228))
+
 ## 4.5.0
 
  * **Improvement**

README.md

@@ -59,6 +59,7 @@ new BundleAnalyzerPlugin(options?: object)
 |**`analyzerMode`**|One of: `server`, `static`, `json`, `disabled`|Default: `server`. In `server` mode analyzer will start HTTP server to show bundle report. In `static` mode single HTML file with bundle report will be generated. In `json` mode single JSON file with bundle report will be generated. In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`. |
 |**`analyzerHost`**|`{String}`|Default: `127.0.0.1`. Host that will be used in `server` mode to start HTTP server.|
 |**`analyzerPort`**|`{Number}` or `auto`|Default: `8888`. Port that will be used in `server` mode to start HTTP server.|
+|**`analyzerUrl`**|`{Function}` called with `{ listenHost: string, listenHost: string, boundAddress: server.address}`. [server.address comes from Node.js](https://nodejs.org/api/net.html#serveraddress)| Default: `http://${listenHost}:${boundAddress.port}`. The URL printed to console with server mode.|
 |**`reportFilename`**|`{String}`|Default: `report.html`. Path to bundle report file that will be generated in `static` mode. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config).|
 |**`reportTitle`**|`{String\|function}`|Default: function that returns pretty printed current date and time. Content of the HTML `title` element; or a function of the form `() => string` that provides the content.|
 |**`defaultSizes`**|One of: `stat`, `parsed`, `gzip`|Default: `parsed`. Module sizes to show in report by default. [Size definitions](#size-definitions) section describes what these values mean.|

src/BundleAnalyzerPlugin.js

@@ -23,6 +23,7 @@ class BundleAnalyzerPlugin {
       logLevel: 'info',
       // deprecated
       startAnalyzer: true,
+      analyzerUrl: utils.defaultAnalyzerUrl,
       ...opts,
       analyzerPort: 'analyzerPort' in opts ? (opts.analyzerPort === 'auto' ? 0 : opts.analyzerPort) : 8888
     };
@@ -107,7 +108,8 @@ class BundleAnalyzerPlugin {
         bundleDir: this.getBundleDirFromCompiler(),
         logger: this.logger,
         defaultSizes: this.opts.defaultSizes,
-        excludeAssets: this.opts.excludeAssets
+        excludeAssets: this.opts.excludeAssets,
+        analyzerUrl: this.opts.analyzerUrl
       });
     }
   }

src/utils.js

@@ -53,6 +53,11 @@ exports.defaultTitle = function () {
   return `${process.env.npm_package_name || 'Webpack Bundle Analyzer'} [${currentTime}]`;
 };
 
+exports.defaultAnalyzerUrl = function (options) {
+  const {listenHost, boundAddress} = options;
+  return `http://${listenHost}:${boundAddress.port}`;
+};
+
 /**
  * Calls opener on a URI, but silently try / catches it.
  */

src/viewer.js

@@ -39,7 +39,8 @@ async function startServer(bundleStats, opts) {
     logger = new Logger(),
     defaultSizes = 'parsed',
     excludeAssets = null,
-    reportTitle
+    reportTitle,
+    analyzerUrl
   } = opts || {};
 
   const analyzerOpts = {logger, excludeAssets};
@@ -73,7 +74,11 @@ async function startServer(bundleStats, opts) {
     server.listen(port, host, () => {
       resolve();
 
-      const url = `http://${host}:${server.address().port}`;
+      const url = analyzerUrl({
+        listenPort: port,
+        listenHost: host,
+        boundAddress: server.address()
+      });
 
       logger.info(
         `${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` +

test/viewer.js

@@ -16,7 +16,8 @@ describe('WebSocket server', function () {
     const options = {
       openBrowser: false,
       logger: new Logger('silent'),
-      port: 0
+      port: 0,
+      analyzerUrl: () => ''
     };
 
     startServer(bundleStats, options)