How does front-end code get loaded into the browser?

Simple overview.

Clarifications

• "Magic" is used as "Dynamic, runtime based, dependent on the state of your code/client cache/server state & extensions" to shorten things and in a humorous key.
• This overview refers to the lifecycle in production mode (debug=false), in debug=true scripts are loaded separately and no magic URLs are composed.
• See also https://www.mediawiki.org/wiki/ResourceLoader/Features#Front-end

In other places

• https://commons.wikimedia.org/wiki/File:Frontend_resource_loading_in_MediaWiki.png