#RuntimePlugin hooks

RuntimePlugin is used to generate the code for the Rspack startup. It provides the following hooks that can be used to modify these runtime codes.

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';
  `;
});