Build configuration plugins enable modification of the Webpack configuration. To achieve it, the following actions are required:

1. Create a new extension

In order to create a build configuration plugin an extension module should be created.

To create such an extension module we need to make a new NPM package. This can be done by creating a new folder and inside running the following commands:

npm init # Using NPM
yarn init # Using Yarn

It is important for an extension to be recognized by Mosaic. To do it, add a mosaic field to the package.json:

{
	// ...
  "mosaic": {
    "type": "extension"
  }
	// ...
}

2. Register a CRACO plugin

Next, create a build configuration plugin declaration file (for example ./build-config/config.js) and register it in mosaic section.

<aside> 🧠 Location of build configuration plugin does not matter technically. However, to get better ESLint suggestions, put it inside of a folder starting with build prefix.

</aside>

{
  "mosaic": {
	"type": "extension"
    "build": {
      "cracoPlugins": ["./build-config/config.js"]
    }
  }
}

3. Implement a logic to modify build configuration

Implement a build configuration plugin (created previously, for example ./build-config/config.js). Overrides of Webpack and Babel configs are available:

module.exports = {
  plugin: {
		overrideCracoConfig: ({ cracoConfig }) => {
      // TODO: modify CRACO config
			return cracoConfig;
		},
    overrideWebpackConfig: ({ webpackConfig }) => {
      // TODO: modify webpack config
      return webpackConfig;
    }
  }
};

4. Link the extension

Install and enable the newly created extension, by installing it from filesystem. Given extension name test-extension, located in packages/test, run:

yarn add test-extension@link:./packages/test # using Yarn
npm i test-extension@file:./packages/test # using NPM

<aside> 🧠 When using NPM, the package is not automatically linked (which means updates will not be synced after installation). To avoid it, make sure the package.json contains the following scripts:

// ...
"scripts": {
	// ...
  "postinstall": "scandipwa-scripts link",
  "postupdate": "scandipwa-scripts link"
}
// ...

</aside>

5. Enable the extension

In the package.json, enable the extension by setting it to true:

// ...
"extensions": {
	// ...
	"test-extension": true
}
// ...