tools.rspack#

• Type: Rspack.Configuration | Function | undefined
• Default: undefined

tools.rspack is used to configure Rspack.

Object Type#

tools.rspack can be configured as an object to be deep merged with the built-in Rspack configuration through webpack-merge.

For example, add resolve.alias configuration:

export default {
  tools: {
    rspack: {
      resolve: {
        alias: {
          '@util': 'src/util',
        },
      },
    },
  },
};

When merging configurations, webpack-merge will automatically concatenate arrays such as plugins, module.rules, resolve.extensions, etc.

export default {
  tools: {
    rspack: {
      resolve: {
        // merged with the built-in resolve.extensions
        extensions: ['.foo'],
      },
    },
  },
};

If you need to override a configuration rather than merge it with the default value, you can use the function type of tools.rspack.

Function Type#

tools.rspack can be configured as a function. The first parameter of this function is the built-in Rspack configuration object, you can modify this object, and then return it. For example:

export default {
  tools: {
    rspack: (config) => {
      config.resolve ||= {};
      config.resolve.alias ||= {};
      config.resolve.alias['@util'] = 'src/util';
      return config;
    },
  },
};

tools.rspack can also be an async function:

export default {
  tools: {
    rspack: async (config) => {
      const { default: ESLintPlugin } = await import('eslint-webpack-plugin');
      config.plugins?.push(new ESLintPlugin());
      return config;
    },
  },
};

Utils#

The second parameter of this function is an object, which contains some utility functions and properties, as follows:

env#

• Type: 'development' | 'production' | 'test'

The env parameter can be used to determine whether the current environment is development, production or test. For example:

export default {
  tools: {
    rspack: (config, { env }) => {
      if (env === 'development') {
        config.devtool = 'cheap-module-eval-source-map';
      }
      return config;
    },
  },
};

isDev#

• Type: boolean

Used to determine whether the current build is a development build, such as:

export default {
  tools: {
    rspack: (config, { isDev }) => {
      if (isDev) {
        config.devtool = 'eval-cheap-source-map';
      }
      return config;
    },
  },
};

isProd#

• Type: boolean

Used to determine whether the current build is a production build, such as:

export default {
  tools: {
    rspack: (chain, { isProd }) => {
      if (isProd) {
        chain.devtool('source-map');
      }
    },
  },
};

target#

• Type: 'web' | 'node' | 'web-worker'

The target parameter can be used to determine the build target environment. For example:

export default {
  tools: {
    rspack: (config, { target }) => {
      if (target === 'node') {
        // ...
      }
      return config;
    },
  },
};

isServer#

• Type: boolean

Determines whether the target environment is node, equivalent to target === 'node'.

export default {
  tools: {
    rspack: (config, { isServer }) => {
      if (isServer) {
        // ...
      }
      return config;
    },
  },
};

isWebWorker#

• Type: boolean

Determines whether the target environment is web-worker, equivalent to target === 'web-worker'.

export default {
  tools: {
    rspack: (config, { isWebWorker }) => {
      if (isWebWorker) {
        // ...
      }
      return config;
    },
  },
};

rspack#

• Type: Rspack

The Rspack instance. For example:

export default {
  tools: {
    rspack: (config, { rspack }) => {
      config.plugins?.push(new rspack.BannerPlugin());
      return config;
    },
  },
};

HtmlPlugin#

• Type: typeof import('html-rspack-plugin')

The instance of html-rspack-plugin:

export default {
  tools: {
    rspack: (config, { HtmlPlugin }) => {
      console.log(HtmlPlugin);
    },
  },
};

addRules#

• Type: (rules: RuleSetRule | RuleSetRule[]) => void

Add additional Rspack rules to the head of the internal Rspack module rules array.

It should be noted that Rspack loaders will be executed in right-to-left order. If you want the loader you added to be executed before other loaders (Normal Phase), you should use appendRules to add the rule to the end.

For example:

export default {
  tools: {
    rspack: (config, { addRules }) => {
      // add a single rule
      addRules({
        test: /\.foo/,
        loader: require.resolve('foo-loader'),
      });

      // Add multiple rules as an array
      addRules([
        {
          test: /\.foo/,
          loader: require.resolve('foo-loader'),
        },
        {
          test: /\.bar/,
          loader: require.resolve('bar-loader'),
        },
      ]);
    },
  },
};

appendRules#

• Type: (rules: RuleSetRule | RuleSetRule[]) => void

Add additional Rspack rules to the end of the internal Rspack module rules array.

For example:

export default {
  tools: {
    rspack: (config, { appendRules }) => {
      // add a single rule
      appendRules({
        test: /\.foo/,
        loader: require.resolve('foo-loader'),
      });

      // Add multiple rules as an array
      appendRules([
        {
          test: /\.foo/,
          loader: require.resolve('foo-loader'),
        },
        {
          test: /\.bar/,
          loader: require.resolve('bar-loader'),
        },
      ]);
    },
  },
};

prependPlugins#

• Type: (plugins: BundlerPluginInstance | BundlerPluginInstance[]) => void

Add additional plugins to the head of the internal Rspack plugins array, and the plugin will be executed first.

export default {
  tools: {
    rspack: (config, { prependPlugins }) => {
      // add a single plugin
      prependPlugins(new PluginA());

      // Add multiple plugins
      prependPlugins([new PluginA(), new PluginB()]);
    },
  },
};

appendPlugins#

• Type: (plugins: BundlerPluginInstance | BundlerPluginInstance[]) => void

Add additional plugins at the end of the internal Rspack plugins array, the plugin will be executed last.

export default {
  tools: {
    rspack: (config, { appendPlugins }) => {
      // add a single plugin
      appendPlugins([new PluginA()]);

      // Add multiple plugins
      appendPlugins([new PluginA(), new PluginB()]);
    },
  },
};

removePlugin#

• Type: (name: string) => void

Remove the internal Rspack plugin, the parameter is the constructor.name of the plugin.

For example, remove the internal webpack-bundle-analyzer:

export default {
  tools: {
    rspack: (config, { removePlugin }) => {
      removePlugin('BundleAnalyzerPlugin');
    },
  },
};

mergeConfig#

• Type: (...configs:Rspack.Configuration[]) =>Rspack.Configuration

Used to merge multiple Rspack configs, same as webpack-merge.

export default {
  tools: {
    rspack: (config, { mergeConfig }) => {
      return mergeConfig(config, {
        devtool: 'eval',
      });
    },
  },
};