Support Webpack v3

[patrickhousley]

The analyse tool is throwing the below error when loading a stats.json file from webpack v3.

web.js:1 Uncaught TypeError: Cannot read property 'sort' of undefined
    at r (web.js:1)
    at Object.e.load (web.js:1)
    at FileReader.e.onload (/analyse/8.568a26e05565c8025a86.js:1)

stats.json

[stephan-v]

28 days and no reply, this is just bad.

[ShadowManu]

this is by no means a fix (but can be used for a PR, actually), but you can use Chrome pretty formatter and debugger to put a breakpoint the place I did.

After the breakpoint is active, run t.modules = [], and continue running ;)

PD: this gives the idea that making the modules property start with a empty array at around line in source code should fix the .sort against undefined.

[patrickhousley]

I was able to work around this for now using the webpack-stats-plugin module and the below code:

new StatsWriterPlugin({
      filename: 'server-stats.json',
      fields: null
    })

[juanpicado]

Just set profile flag when you run webpack

webpack --config webpack.conf.js --progress --profile --json > stats.json

And it works fine.

[salemhilal]

It seems that the --profile flag, as used above, does not fix the issue (I've tried repro-ing a few times on my end).

Edit: I can confirm that adding "modules": [] to the resulting json file fixes the problem. I'm not sure if this is a bug with webpack --profile or analyse, though.

[mbonaci]

For some reason, when there are multiple entry points, selection doesn't work.

So, checkout the repo, do npm install or yarn and change the following line here:
https://github.com/webpack/analyse/blob/master/app/app.js#L114

from this:

  load(stats);

to this:

  var toLoad = stats.modules ? stats : stats.children[0];
  load(toLoad);

Then, if you have grunt-cli installed globally, start the app with grunt dev and open http://localhost:8080.

Otherwise just install grunt-cli locally like this:
yarn add -D grunt-cli

and then start the app with:
./node_modules/.bin/grunt dev

and open http://localhost:8080.

I used Firefox and I noticed that modules/chunks visualization is flaky.
It constantly shifts couple of pixels at a time towards the bottom. Practically unusable.

This repo could really use an overhaul. This is a great idea for visually inspecting the inter-dependencies of your project.

[zerocsss]

Excuse me, Also supports webpack4？

[softwareCobbler]

Edit: I can confirm that adding "modules": [] to the resulting json file fixes the problem. I'm not sure if this is a bug with webpack --profile or analyse, though.

Same problem here with the JSON output of an ng build --prod --stats-json, manually adding "modules":[] to the root level of the JSON object got the stats.json file opening inside of the webpack analyzer.

[joma74]

When using NamedChunksPlugin in 3.12.0

Uncaught TypeError: Cannot read property 'size' of undefined
    at anonymous (VM122 6.568a26e05565c8025a86.js:1)
    at u.exports (VM122 6.568a26e05565c8025a86.js:1)
    at HTMLDocument.<anonymous> (VM106 web.js:1)
    at j (VM104 jquery-2.1.0.min.js:2)
    at Object.add [as done] (VM104 jquery-2.1.0.min.js:2)
    at o.fn.init.o.fn.ready (VM104 jquery-2.1.0.min.js:2)
    at new o.fn.init (VM104 jquery-2.1.0.min.js:2)
    at o (VM104 jquery-2.1.0.min.js:2)
    at Array.<anonymous> (VM106 web.js:1)
    at VM106 web.js:6

[slavafomin]

Make sure that you generate the stats.json file with modules property set to true, otherwise it will not contain it and will cause the issue with most tools. Be advised, that verbose preset IS NOT including the modules field, despite what the documentation says.

Here's the more details: webpack/webpack#9392