# Build configuration 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 CRA setups, CRACO plugin API is available instead of this one.
{% 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": {
            "plugins": ["./build-config/plugin-file.js"]
        }
    }
}
```

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

## Modify the configurations

A build configuration plugin declaration file is a [CJS module](https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm), which exports a single object with `plugin` property. 

This plugin property defines at least one of the two fields visible below. 

Each field provides a **function**, which accepts a **Webpack** or **Babel** configuration object (correspondingly). This function processes the configuration object and **returns** a new value, used as a corresponding configuration further in the application. It is commonly accepted to mutate the configuration within these functions.

```javascript
module.exports = {
    plugin: {
        overrideWebpackConfig: (webpackConfig) => {
            // TODO modify webpack config
        
            return webpackConfig;
        },
        overrideBabelConfig: (babelConfig) => {
            // TODO modify babel config
        
            return babelConfig;
        }
    }
};
```

{% hint style="warning" %}
Despite the resemblance with [CRACO plugins](https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#develop-a-plugin), this API is not related to CRACO.
{% endhint %}


---

# 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/develop-an-extension/build-configuration-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.