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