stats.json messed up with outputs from webpackbar

[shahzaibkhalid]

First of all, thanks so much for this wonderful progress bar.

I was using webpackbar and tried to write a stats.json file to be used by webpack-bundle-analyzer.

Here's my npm script:

webpack --env=production --profile --json > stats.json

However, stats.json contains some output from webpackbar. Here's how it looks like:

ℹ Compiling Webpack                                        webpackbar 18:06:57
✔ Webpack: Compiled successfully in 3.22s                  webpackbar 18:07:00
{
  "errors": [],
  "warnings": [],
  "version": "4.29.3",
  "hash": "ed64caf72379ba267639",
  "time": 3228,
  "builtAt": 1549976820840,
  "publicPath": "/",
  "outputPath": "/Users/shahzaib/my-stuff/serious-projects/testing-shaizei/copy-jetsetter/build",
  "assetsByChunkName": {
    "main": [
    // remaining file is not included for brevity
}

Due to these two lines (in the start), stats.json is becoming invalid.

Any workaround for this?

_{This question is available on Nuxt community (#c33)}

[ghost]

This issue as been imported as question since it does not respect webpackbar issue template. Only bug reports and feature requests stays open to reduce maintainers workload. If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically. Your question is available at https://cmty.app/nuxt/webpackbar/issues/c33.

[Airkro]

webpack-bundle-analyzer can write stats.json by himself

[shahzaibkhalid]

@airkro What do you mean? Can you please explain it a bit?

What I got to know was that our webpack config shouldn't have any console.log because those logs can end-up in stats.json.

[Airkro]

I don't know if this is what you want, but have you tried this?

new BundleAnalyzerPlugin({
  analyzerMode: 'static',
  generateStatsFile: true,  //  <----------------
  reportFilename: 'xxx/stats.html',
  statsFilename: 'xxx/stats.json'
})

[Airkro]

Countless plugins use the console API. So I think any output from the terminal is untrustworthy, I don't recommend using whatever --foo --bar > files.json

[shahzaibkhalid]

I got you. I was preferring the use of CLI for webpack-bundle-analyzer but now I see why the other way is recommended.

[thasmo]

When using the --json flag via webpack-cli the webpackbar plugin should not output ...

webpackbar 13:14:00 ℹ Compiling Webpack
webpackbar 13:14:04 ✔ Webpack: Compiled successfully in 3.40s

... because it makes the JSON output invalid.

Will this issue be worked on in the future or are there any reasons it has not been closed yet? Thanks!

[krishan]

WFIW I just got bitten by this problem also.

The official webpack documentation does recommends to use stdout, therefore I don't think it wise for a plugin to break this standard functionality.

This is from the official webpack docs:

webpack --profile --json > compilation-stats.json

See: https://webpack.js.org/api/stats/

[cweekly]

Yeah this is not specific to webpackbar. I ran into the same thing with webpack-bundle-analyzer. Despite the official docs cited by @krishan above, any console output appears in the generated file (eg stats.json), effectively breaking the mechanism. Ideally, this would be fixed in webpack-cli per @thasmo's comment https://github.com/nuxt/webpackbar/issues/42#issuecomment-491254131