[Internal] Injection plugin

[yoannmoinet]

What and why?

Having a way to reliably prepend some code to the output bundle would be great.

It needs to:

• support all the currently supported bundlers (webpack4-5, esbuild, rollup and vite).
• be usable from anywhere within the ecosystem.
• support local files, distant files and raw code.
• not conflict with the existing plugins (build report in particular).

How?

Create a pretty simple injection plugin.

It's composed of 4 different elements:

• A context.inject() function you'd call to add a new item to inject.
• A preparation plugin, that resolves all the injections.
• A file injection plugin, that injects, within the bundle, a stub file where all the injections live (rollup is different, more on this later)
• A resolution plugin, that resolve the stub file.

Note

Rollup and Vite are different because they offer the banner hook that works as expected OOTB.
We couldn't use the Webpack's BannerPlugin because it doesn't gives you the information about the chunk being entry or not, which is critical if you want to inject something only once.

I have a follow-up PR with the documentation.

[elbywan]

LGTM 👍

Rollup and Vite are different because they offer the banner hook that works as expected OOTB.

AFAIK esbuild also provides this: https://esbuild.github.io/api/#banner
Is there a reason for not using it?

[yoannmoinet]

AFAIK esbuild also provides this: https://esbuild.github.io/api/#banner
Is there a reason for not using it?

Forgot to mention it for ESBuild, but it's the same reason as for webpack, it doesn't tell you if the current chunk is an entry or not.
And they offer the inject config, which is pretty close to what we need, minus the resolution.

By far, Webpack is the most complicated here, esbuild and rollup/vite are pretty easy to work with in this instance.