optimize webpack runtime as a single chunk for subapps

packages/electrode-archetype-react-app-dev/config/webpack/partial/subapp-chunks.js

@@ -27,6 +27,7 @@ if (AppMode.hasSubApps) {
   // The filename has the pattern of hex-sum.bundle1~bundle2~bundle#.js
   // https://webpack.js.org/plugins/split-chunks-plugin/
   config.optimization = {
+    runtimeChunk: "single",
     splitChunks: {
       chunks: "all",
       minSize: 30 * 1024,

packages/subapp-web/lib/util.js

@@ -35,15 +35,22 @@ const utils = {
     // find entry point
     const entryPoints = assets.entryPoints[entryName];
     assert(entryPoints, `subapp-web: no entry point found for ${name}`);
+
+    // without webpack optimization.runtimeChunk the entry point bundles are generated
+    // as <entryName>.bundle.js, like header.bundle.js
+    // but with runtimeChunk, the entry point are generated with hash
+    // as <hash>.<entryName>.js
+    // So check both cases.
+    const matchEntry = x => x === `${entryName}.bundle.js` || x.endsWith(`.${entryName}.js`);
     // map all IDs to actual assets
     const bundleAssets = entryPoints
       .map(id => {
         let bundleName;
         const js = assets.chunksById.js[id];
         // Only use IDs that has bundle with name that starts with entry's name
         if (Array.isArray(js)) {
-          bundleName = js.find(x => x.startsWith(entryName));
-        } else if (js.startsWith(entryName)) {
+          bundleName = js.find(matchEntry);
+        } else if (matchEntry(js)) {
           bundleName = js;
         }
         return bundleName && assets.js.find(x => x.name === bundleName);

packages/subapp-web/src/subapp-web.js

@@ -53,7 +53,7 @@ function loadSubAppBundles(names, done) {
       return chunkIds.reduce((a2, id) => {
         // chunk could have multiple assets
         return [].concat(ba.jsChunksById[id]).reduce((a3, asset) => {
-          return a3.concat({ name, id, asset });
+          return asset ? a3.concat({ name, id, asset }) : a3;
         }, a2);
       }, a);
     }, [])