CRACO plugins

Mosaic provides an opportunity to modify Webpack and Babel configurations of a project from an isolated module, similarly to the runtime plugins, but not quite.

In non-CRA setups, Build Configuration Plugins are available instead of this API.

Preparations

In order to declare a build configuration plugin, some preparations are necessary. First of all, an extension module must be created. You will implement your plugin there.

For the development purposes, it's recommended to have the under-development extension module installed 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.

{
    "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 to get the full info on this!

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