# 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, ... }) => { ... },
        ...
    }
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mosaic.js.org/cra-features/craco-plugins.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.