# 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](https://docs.mosaic.js.org/develop-an-extension/plugins), 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](https://docs.mosaic.js.org/develop-an-extension/anatomy-of-an-extension) must be [created](https://docs.mosaic.js.org/develop-an-extension/anatomy-of-an-extension). You will implement your plugin there.

For the development purposes, it's recommended to have the under-development extension module [installed](https://docs.mosaic.js.org/install-an-extension/use-a-local-extension) 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 %}