import { Collapse, CollapsePanel } from '@components/Collapse'; import ChunkType from '../../types/chunk.mdx';

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

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

linkPrefetch

SyncWaterallHook<[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

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