---
extractApiHeaders: [2]
---

# Plugin Core

This section describes the core plugin types and APIs.

## BuilderPlugin

The type of the plugin object. The plugin object contains the following properties:

- `name`: The name of the plugin, a unique identifier.
- `setup`: The setup function of the plugin, which can be an asynchronous function. This function will only be executed once when the plugin is initialized.
- `pre`：Specify which plugins precede the current plugin, and the current plugin will be adjusted to execute after these plugins.
- `post`：Specify which post-plugins are available for the current plugin, and the current plugin will be adjusted to execute before these plugins.

```ts
export type BuilderPlugin<API = BuilderPluginAPI> = {
  name: string;
  pre?: string[];
  post?: string[];
  setup: (api: API) => Promise<void> | void;
};
```

You can import this type from `@modern-js/builder`:

```ts
import type { BuilderPlugin } from '@modern-js/builder';

export default (): BuilderPlugin => ({
  name: 'builder-plugin-foo',

  pre: ['builder-plugin-bar'],

  setup: api => {
    api.onAfterBuild(() => {
      console.log('after build!');
    });
  },
});
```

## BuilderPluginAPI

The type of plugin API. The plugin API provides the context info, utility functions and lifecycle hooks.

For a complete introduction to lifecycle hooks, please read the [Plugin Hooks](/api/plugin-hooks.html) chapter.

When using webpack-provider or rspack-provider, the type definition of `BuilderPluginAPI` is somewhat different, and you can introduce the corresponding type according to the usage scenario of the plugin.

### Plugin for webpack-provider

When developing plugins for webpack-provider, please import `BuilderPluginAPI` from `@modern-js/builder-webpack-provider`.

```ts
import type { BuilderPlugin } from '@modern-js/builder';
import type { BuilderPluginAPI } from '@modern-js/builder-webpack-provider';

export default (): BuilderPlugin<BuilderPluginAPI> => ({
  name: 'builder-plugin-foo',

  setup: api => {
    api.modifyWebpackConfig(config => {
      config.devtool = false;
    });
  },
});
```

### Plugins for rspack-provider

When developing plugins for rspack-provider, please import `BuilderPluginAPI` from `@modern-js/builder-rspack-provider`.

```ts
import type { BuilderPlugin } from '@modern-js/builder';
import type { BuilderPluginAPI } from '@modern-js/builder-rspack-provider';

export default (): BuilderPlugin<BuilderPluginAPI> => ({
  name: 'builder-plugin-foo',

  setup: api => {
    api.modifyRspackConfig(config => {
      config.devtool = false;
    });
  },
});
```

### Plugins for both webpack-provider and rspack-provider

When developing plugins for both webpack-provider and rspack-provider, please import `DefaultBuilderPlugin` from `@modern-js/builder-shared`.

Note that developing plugins that can support both webpack and Rspack at the same time means that you cannot use any APIs with webpack / Rspack identifiers, such as `modifyWebpackConfig` or `modifyRspackConfig`.

You can use [modifyBundlerChain](/api/plugin-hooks.html#modifybundlerchain-experimental) to modify the configuration that applies to both webpack and Rspack.

```ts
import type { BuilderPlugin } from '@modern-js/builder';
import type { DefaultBuilderPlugin } from '@modern-js/builder-shared';

export default (): BuilderPlugin<DefaultBuilderPlugin> => ({
  name: 'builder-plugin-foo',

  setup: api => {
    api.modifyBundlerChain(chain => {
      chain.devtool(false);
    });
  },
});
```

## api.context

`api.context` is a read-only object that provides some context information.

The content of `api.context` is exactly the same as `builder.context`, please refer to [builder.context](/api/builder-instance.html#builder-context).

- **Example**

```ts
const builderPluginFoo = () => ({
   setup(api) {
     console.log(api.context.distPath);
   }
);
```

## api.getBuilderConfig

import GetBuilderConfig from '@en/shared/getBuilderConfig.md';

<GetBuilderConfig />

- **Example**

```ts
const builderPluginFoo = () => ({
   setup(api) {
     const config = api.getBuilderConfig();
     console.log(config.html?.title);
   }
);
```

## api.getNormalizedConfig

import GetNormalizedConfig from '@en/shared/getNormalizedConfig.md';

<GetNormalizedConfig />

- **Example**

```ts
const builderPluginFoo = () => ({
   setup(api) {
     const config = api.getNormalizedConfig();
     console.log(config.html.title);
   }
);
```

## api.isPluginExists

import IsPluginExists from '@en/shared/isPluginExists.md';

<IsPluginExists />

- **Example**

```ts
export default () => ({
  setup: api => {
    console.log(api.isPluginExists('builder-plugin-foo'));
  },
});
```

## api.getHTMLPaths

import GetHTMLPaths from '@en/shared/getHTMLPaths.md';

<GetHTMLPaths />

- **Example**

```ts
const builderPluginFoo = () => ({
   setup(api) {
     api.modifyWebpackChain(() => {
       const htmlPaths = api.getHTMLPaths();
       console.log(htmlPaths); // { main: 'html/main/index.html' };
     });
   }
);
```
