Updates not reflected on Page Load due to build.rig task order

[Coruscate5]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

None

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [X] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version (latest)
• SPFx version 1.19.0
• Node.js version 18.17.1

Describe the bug / error

Due to the predefined ordering of packing tasks in build.rig, the subtask spfx-serve renders a page before webpack completes. The reload task does not appear to reload the browser, and therefore forces a manual refresh on behalf of the developer once webpack tasks are completed.

I looked into adding pre-telemetry and pre-build tasks by copying the execution of the predefined subtasks, but this does not seem to work (and can't find any examples of anyone doing this).

Steps to reproduce

1. Make updates to your SPFX
2. Run gulp serve
3. SPFX-serve loads the page before updates are actually compiled

Expected behavior

Ideally, spfx-serve should be user-configurable to run at any point in the pipeline, but personally I would like it to be last by default. Yes, it's nice to have hot reload, but when working with multiple developers on a complex project, we will frequently be out of watch mode.