Fix parsing webpack 4's chunks (#159)

* Fix parsing webpack 4's chunks

Webpack 4 has a new chunk style, looking something like this:

(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{"57iH":function(e,n,t){console.log("hello world")}}]);

* Add tests for webpack4 modules with additional entrypoint ids

* Update changelog

CHANGELOG.md

@@ -14,6 +14,9 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 <!-- Add changelog entries for new changes under this section -->
 
+ * **Improvement**
+   * Add support for parsing Webpack 4's chunked modules ([#159](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/159), [@jdelStrother](https://github.com/jdelStrother))
+
 ## 2.11.0
 
  * **Improvement**

src/parseUtils.js

@@ -71,6 +71,17 @@ function parseBundle(bundlePath) {
           return;
         }
 
+        // Additional bundles with webpack 4 are loaded with:
+        // (window.webpackJsonp=window.webpackJsonp||[]).push([[chunkId], [<module>, <module>], [[optional_entries]]]);
+        if (
+          isWindowPropertyPushExpression(node) &&
+          args.length === 1 &&
+          isArgumentContainingChunkIdsAndModulesList(args[0])
+        ) {
+          state.locations = getModulesLocationFromFunctionArgument(args[0].elements[1]);
+          return;
+        }
+
         // Walking into arguments because some of plugins (e.g. `DedupePlugin`) or some Webpack
         // features (e.g. `umd` library output) can wrap modules list into additional IIFE.
         _.each(args, arg => c(arg, state));
@@ -115,6 +126,18 @@ function isArgumentContainsModulesList(arg) {
   return false;
 }
 
+function isArgumentContainingChunkIdsAndModulesList(arg) {
+  if (
+    arg.type === 'ArrayExpression' &&
+    arg.elements.length >= 2 &&
+    isArgumentContainsChunkIds(arg.elements[0]) &&
+    isArgumentContainsModulesList(arg.elements[1])
+  ) {
+    return true;
+  }
+  return false;
+}
+
 function isArgumentArrayConcatContainingChunks(arg) {
   if (
     arg.type === 'CallExpression' &&
@@ -141,6 +164,13 @@ function isArgumentArrayConcatContainingChunks(arg) {
   return false;
 }
 
+function isWindowPropertyPushExpression(node) {
+  return node.callee.type === 'MemberExpression' &&
+    node.callee.property.name === 'push' &&
+    node.callee.object.type === 'AssignmentExpression' &&
+    node.callee.object.left.object.name === 'window';
+}
+
 function isModuleWrapper(node) {
   return (
     // It's an anonymous function expression that wraps module

test/bundles/validWebpack4Chunk.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{"57iH":function(e,n,t){console.log("hello world")}}]);

test/bundles/validWebpack4Chunk.modules.json

@@ -0,0 +1,5 @@
+{
+  "modules": {
+    "57iH": "function(e,n,t){console.log(\"hello world\")}"
+  }
+}

test/bundles/validWebpack4ChunkAndEntryPoint.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{"57iH":function(e,n,t){console.log("hello world")}},[["57iH",19,24,25]]]);

test/bundles/validWebpack4ChunkAndEntryPoint.modules.json

@@ -0,0 +1,5 @@
+{
+  "modules": {
+    "57iH": "function(e,n,t){console.log(\"hello world\")}"
+  }
+}