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:

module.exports = {
  //...
  plugins: [
    {
      apply: compiler => {
        const { RuntimePlugin } = compiler.webpack;
        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';
  `;
});