fix: plugin uses infrastructureLogger and outputs the report.html to compiler.outputFileSystem

Author: wood1986

src/BundleAnalyzerPlugin.js

@@ -1,11 +1,11 @@
-const fs = require('fs');
 const path = require('path');
 const {bold} = require('chalk');
 
 const Logger = require('./Logger');
 const viewer = require('./viewer');
 const utils = require('./utils');
 const {writeStats} = require('./statsUtils');
+const PLUGIN_NAME = 'webpack-bundle-analyzer';
 
 class BundleAnalyzerPlugin {
   constructor(opts = {}) {
@@ -28,13 +28,18 @@ class BundleAnalyzerPlugin {
     };
 
     this.server = null;
-    this.logger = new Logger(this.opts.logLevel);
   }
 
   apply(compiler) {
+    const isFromWebpackDevServer = process.env.WEBPACK_SERVE === 'true';
+
     this.compiler = compiler;
 
+    this.logger = require('webpack/lib/logging/runtime')?.getLogger(PLUGIN_NAME)
+      || new Logger(this.opts.logLevel);
+
     const done = (stats, callback) => {
+      this.fs = isFromWebpackDevServer ? compiler.outputFileSystem : require('fs');
       callback = callback || (() => {});
 
       const actions = [];
@@ -72,15 +77,15 @@ class BundleAnalyzerPlugin {
     };
 
     if (compiler.hooks) {
-      compiler.hooks.done.tapAsync('webpack-bundle-analyzer', done);
+      compiler.hooks.done.tapAsync(PLUGIN_NAME, done);
     } else {
       compiler.plugin('done', done);
     }
   }
 
   async generateStatsFile(stats) {
     const statsFilepath = path.resolve(this.compiler.outputPath, this.opts.statsFilename);
-    await fs.promises.mkdir(path.dirname(statsFilepath), {recursive: true});
+    await this.fs.promises.mkdir(path.dirname(statsFilepath), {recursive: true});
 
     try {
       await writeStats(stats, statsFilepath);
@@ -117,7 +122,8 @@ class BundleAnalyzerPlugin {
       reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename || 'report.json'),
       bundleDir: this.getBundleDirFromCompiler(),
       logger: this.logger,
-      excludeAssets: this.opts.excludeAssets
+      excludeAssets: this.opts.excludeAssets,
+      fs: this.fs
     });
   }
 
@@ -129,7 +135,8 @@ class BundleAnalyzerPlugin {
       bundleDir: this.getBundleDirFromCompiler(),
       logger: this.logger,
       defaultSizes: this.opts.defaultSizes,
-      excludeAssets: this.opts.excludeAssets
+      excludeAssets: this.opts.excludeAssets,
+      fs: this.fs
     });
   }
 

src/bin/analyzer.js

@@ -4,6 +4,7 @@ const {resolve, dirname} = require('path');
 
 const commander = require('commander');
 const {magenta} = require('chalk');
+const fs = require('fs');
 
 const analyzer = require('../analyzer');
 const viewer = require('../viewer');
@@ -138,14 +139,16 @@ if (mode === 'server') {
     defaultSizes,
     bundleDir,
     excludeAssets,
-    logger: new Logger(logLevel)
+    logger: new Logger(logLevel),
+    fs
   });
 } else if (mode === 'json') {
   viewer.generateJSONReport(bundleStats, {
     reportFilename: resolve(reportFilename || 'report.json'),
     bundleDir,
     excludeAssets,
-    logger: new Logger(logLevel)
+    logger: new Logger(logLevel),
+    fs
   });
 }
 

src/viewer.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const fs = require('fs');
 const http = require('http');
 
 const WebSocket = require('ws');
@@ -129,7 +128,8 @@ async function generateReport(bundleStats, opts) {
     bundleDir = null,
     logger = new Logger(),
     defaultSizes = 'parsed',
-    excludeAssets = null
+    excludeAssets = null,
+    fs
   } = opts || {};
 
   const chartData = getChartData({logger, excludeAssets}, bundleStats, bundleDir);
@@ -156,7 +156,7 @@ async function generateReport(bundleStats, opts) {
 }
 
 async function generateJSONReport(bundleStats, opts) {
-  const {reportFilename, bundleDir = null, logger = new Logger(), excludeAssets = null} = opts || {};
+  const {reportFilename, bundleDir = null, logger = new Logger(), excludeAssets = null, fs} = opts || {};
 
   const chartData = getChartData({logger, excludeAssets}, bundleStats, bundleDir);