Support webpack:/// in filename

src/html.ts

@@ -91,9 +91,27 @@ function getNodePath(parts: string[], depthIndex: number): string {
   return parts.slice(0, depthIndex + 1).join('/');
 }
 
+const WEBPACK_FILENAME_PREFIX = 'webpack:///';
+const WEBPACK_FILENAME_PREFIX_LENGTH = WEBPACK_FILENAME_PREFIX.length;
+
+function splitFilename(file: string): string[] {
+  const webpackPrefixIndex = file.indexOf(WEBPACK_FILENAME_PREFIX);
+
+  // Treat webpack file prefix as a filename part
+  if (webpackPrefixIndex !== -1) {
+    return [
+      ...file.substring(0, webpackPrefixIndex).split('/'),
+      WEBPACK_FILENAME_PREFIX,
+      ...file.substring(webpackPrefixIndex + WEBPACK_FILENAME_PREFIX_LENGTH).split('/'),
+    ].filter(Boolean);
+  }
+
+  return file.split('/');
+}
+
 function getTreeNodesMap(fileDataMap: FileDataMap): TreeNodesMap {
   let partsSourceTuples = Object.keys(fileDataMap).map<[string[], string]>(file => [
-    file.split('/'),
+    splitFilename(file),
     file,
   ]);
 

tests/unit/__snapshots__/html.test.ts.snap

@@ -180,3 +180,94 @@ exports['html getWebTreeMapData should not create node for zero size files 1'] =
     }
   ]
 }
+
+exports['html getWebTreeMapData should not split webpack:/// when collapsing non-contributing nodes 1'] = {
+  "name": "/ \u2022 28 B \u2022 100.0%",
+  "data": {
+    "$area": 28
+  },
+  "children": [
+    {
+      "name": "webpack:/// \u2022 6 B \u2022 21.4%",
+      "data": {
+        "$area": 6
+      },
+      "children": [
+        {
+          "name": "a/b/c.js \u2022 1 B \u2022 3.6%",
+          "data": {
+            "$area": 1
+          }
+        },
+        {
+          "name": "d \u2022 5 B \u2022 17.9%",
+          "data": {
+            "$area": 5
+          },
+          "children": [
+            {
+              "name": "e.js \u2022 2 B \u2022 7.1%",
+              "data": {
+                "$area": 2
+              }
+            },
+            {
+              "name": "f.js \u2022 3 B \u2022 10.7%",
+              "data": {
+                "$area": 3
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "d \u2022 15 B \u2022 53.6%",
+      "data": {
+        "$area": 15
+      },
+      "children": [
+        {
+          "name": "webpack:/// \u2022 9 B \u2022 32.1%",
+          "data": {
+            "$area": 9
+          },
+          "children": [
+            {
+              "name": "g \u2022 9 B \u2022 32.1%",
+              "data": {
+                "$area": 9
+              },
+              "children": [
+                {
+                  "name": "h.js \u2022 4 B \u2022 14.3%",
+                  "data": {
+                    "$area": 4
+                  }
+                },
+                {
+                  "name": "i.js \u2022 5 B \u2022 17.9%",
+                  "data": {
+                    "$area": 5
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "name": "j/i.js \u2022 6 B \u2022 21.4%",
+          "data": {
+            "$area": 6
+          }
+        }
+      ]
+    },
+    {
+      "name": "z \u2022 7 B \u2022 25.0%",
+      "data": {
+        "$area": 7
+      }
+    }
+  ]
+}

tests/unit/html.test.ts

@@ -20,6 +20,20 @@ describe('html', () => {
       snapshot(getWebTreeMapData(fileDataMap));
     });
 
+    it('should not split webpack:/// when collapsing non-contributing nodes', () => {
+      const fileDataMap: FileDataMap = {
+        'webpack:///a/b/c.js': { size: 1 },
+        'webpack:///d/e.js': { size: 2 },
+        'webpack:///d/f.js': { size: 3 },
+        'd/webpack:///g/h.js': { size: 4 },
+        'd/webpack:///g/i.js': { size: 5 },
+        'd/j/i.js': { size: 6 },
+        z: { size: 7 },
+      };
+
+      snapshot(getWebTreeMapData(fileDataMap));
+    });
+
     it('should not create node for zero size files', () => {
       const fileDataMap: FileDataMap = {
         'a/b/c.js': { size: 1 },