Fix HMR with content hashing changes

src/Asset.js

@@ -180,6 +180,20 @@ class Asset {
     return md5(this.name) + '.' + this.type;
   }
 
+  replaceBundleNames(bundleNameMap) {
+    for (let key in this.generated) {
+      let value = this.generated[key];
+      if (typeof value === 'string') {
+        // Replace temporary bundle names in the output with the final content-hashed names.
+        for (let [name, map] of bundleNameMap) {
+          value = value.split(name).join(map);
+        }
+
+        this.generated[key] = value;
+      }
+    }
+  }
+
   generateErrorMessage(err) {
     return err;
   }

src/Bundler.js

@@ -187,22 +187,33 @@ class Bundler extends EventEmitter {
       // Build the queued assets.
       let loadedAssets = await this.buildQueue.run();
 
-      // Emit an HMR update for any new assets (that don't have a parent bundle yet)
-      // plus the asset that actually changed.
-      if (this.hmr && !isInitialBundle) {
-        this.hmr.emitUpdate([...this.findOrphanAssets(), ...loadedAssets]);
-      }
+      // The changed assets are any that don't have a parent bundle yet
+      // plus the ones that were in the build queue.
+      let changedAssets = [...this.findOrphanAssets(), ...loadedAssets];
 
       // Invalidate bundles
       for (let asset of this.loadedAssets.values()) {
         asset.invalidateBundle();
       }
 
-      // Create a new bundle tree and package everything up.
+      // Create a new bundle tree
       this.mainBundle = this.createBundleTree(this.mainAsset);
+
+      // Generate the final bundle names, and replace references in the built assets.
       this.bundleNameMap = this.mainBundle.getBundleNameMap(
         this.options.contentHash
       );
+
+      for (let asset of changedAssets) {
+        asset.replaceBundleNames(this.bundleNameMap);
+      }
+
+      // Emit an HMR update if this is not the initial bundle.
+      if (this.hmr && !isInitialBundle) {
+        this.hmr.emitUpdate(changedAssets);
+      }
+
+      // Package everything up
       this.bundleHashes = await this.mainBundle.package(
         this,
         this.bundleHashes

src/packagers/JSPackager.js

@@ -163,7 +163,11 @@ class JSPackager extends Packager {
     if (this.externalModules.size > 0) {
       let preload = [];
       for (let mod of this.externalModules) {
-        preload.push([mod.generateBundleName(), mod.id]);
+        // Find the bundle that has the module as its entry point
+        let bundle = Array.from(mod.bundles).find(b => b.entryAsset === mod);
+        if (bundle) {
+          preload.push([path.basename(bundle.name), mod.id]);
+        }
       }
 
       if (this.bundle.entryAsset) {

src/packagers/Packager.js

@@ -22,16 +22,7 @@ class Packager {
   }
 
   async write(string) {
-    await this.dest.write(this.replaceBundleNames(string));
-  }
-
-  replaceBundleNames(string) {
-    // Replace temporary bundle names in the output with the final content-hashed names.
-    for (let [name, map] of this.bundler.bundleNameMap) {
-      string = string.split(name).join(map);
-    }
-
-    return string;
+    await this.dest.write(string);
   }
 
   async start() {}