> For the complete documentation index, see [llms.txt](https://docs.mosaic.js.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mosaic.js.org/cra-features/craco-plugins.md).

# CRACO plugins

**Mosaic** provides an opportunity to modify **Webpack** and **Babel** configurations of a project from an isolated module, similarly to the [runtime plugins](/develop-an-extension/plugins.md), but not quite.

{% hint style="info" %}
In non-CRA setups, [Build Configuration Plugins](/develop-an-extension/build-configuration-plugins.md) are available instead of this API.
{% endhint %}

## Preparations

In order to **declare a build configuration plugin**, some preparations are necessary. First of all, an [extension module](/develop-an-extension/anatomy-of-an-extension.md) must be [created](/develop-an-extension/anatomy-of-an-extension.md). You will implement your plugin there.

For the development purposes, it's recommended to have the under-development extension module [installed](/install-an-extension/use-a-local-extension.md) into your project.

## Declare a build configuration plugin

Then, in your module, you should create a **build configuration plugin** declaration file, and reference it from your **package.json**. It is commonly accepted to create such plugins in `build-config` directory in the root of your module.

Any module can have **unlimited** amount of such plugins. If the module is **enabled**, or used as a **parent** theme - its build configuration plugins will be **present** in the application.

```javascript
{
    "mosaic": {
        "build": {
            "cracoPlugins": ["./build-config/something.js"]
        }
    }
}
```

The guide below describes the process of implementing logic in this plugin declaration file. 

## Write a build configuration plugin

A CRACO build configuration plugin looks something like this. 

Notice that here you need to destructure the corresponding configurations from the first argument of the function you write, as shown below. 

This approach supports CRACO plugin API completely, so [check out their docs](https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#develop-a-plugin) to get the full info on this!

```javascript
module.exports = {
    plugin: {
        overrideCracoConfig: ({ cracoConfig, ... }) => { ... },
        overrideWebpackConfig: ({ webpackConfig, ... }) => { ... },
        ...
    }
};
```