#RuntimePlugin hooks

RuntimePlugin generates Rspack runtime code. It provides the following hooks to modify this code.

You can obtain these hooks like below:

export default {
  //...
  plugins: [
    {
      apply: (compiler) => {
        const { RuntimePlugin } = compiler.rspack;
        compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
          const hooks = RuntimePlugin.getCompilationHooks(compilation);
          //...
        });
      },
    },
  ],
};

#createScript

SyncWaterfallHook<[string, Chunk]>

Can modify the code executed when creating the <script> tag.

As in the following code, the crossorigin attribute can be added to the <script> tag:

hooks.createScript.tap('MyPlugin', (code, chunk) => {
  return `
    ${code}
    script.crossOrigin = 'anonymous';
  `;
});

#createLink

SyncWaterfallHook<[string, Chunk]>

Can modify the code executed when creating a generic <link> tag.

hooks.createLink.tap('MyPlugin', (code, chunk) => {
  return `
    ${code}
    link.crossOrigin = 'anonymous';
  `;
});

#linkPrefetch

SyncWaterfallHook<[string, Chunk]>

Can modify the code executed when creating the prefetch <link rel="prefetch"> tag.

As in the following code, the crossorigin attribute can be added to the <link> tag for prefetching:

hooks.linkPrefetch.tap('MyPlugin', (code, chunk) => {
  return `
    ${code}
    link.crossOrigin = 'anonymous';
  `;
});

#linkPreload

SyncWaterfallHook<[string, Chunk]>

Can modify the code executed when creating the preload <link rel="preload"> tag.

As in the following code, the crossorigin attribute can be added to the <link> tag for preloading:

hooks.linkPreload.tap('MyPlugin', (code, chunk) => {
  return `
    ${code}
    link.crossOrigin = 'anonymous';
  `;
});