Documentation

Module bundler

Elevate, May 20-22-2025, Miami Beach, Florida

Built-in module bundler for developing Merchant Center customizations.

The Merchant Center customization tooling uses Webpack as the main bundler for handling code transformation, loading assets, etc. This applies to both development, using the Webpack development server, and production builds.
The Webpack setup is pre-configured, however, if your application has additional requirements, you can extend the Webpack configuration.

Supported features

Hot reloading

We support hot reloading in development mode with the Hot Module Replacement plugin and the React Fast-Refresh plugin.

With these plugins, the application is reloaded when any change in your code occurs.

Import images

We support importing image files with the following file extensions: .svg, .png.

SVG

import ImageSvg from './image.svg';

const Component = () => <img alt="An image" src={ImageSvg} />;
Furthermore, we also support importing SVG files as React components. To do this, rename your SVG files with the extension .react.svg.
import Image from './image.react.svg';

const Component = () => <Image title="An image" />;

PNG

import ImagePng from './image.png';

const Component = () => <img alt="An image" src={ImagePng} />;

Import styles

We support importing CSS files with the following file extensions: .css, .module.css.

Global styles

Global styles can be imported into any application file as follows:

import './style.css';

CSS Modules

We recommend that you define styles using CSS Modules. This allows styles to be locally scoped to each module with a unique class name, thereby avoiding naming collisions.
import * as styles from './style.module.css';

const Component = () => <div className={styles.container}></div>;
style.module.csscss
.container {
  width: 100%;
}
In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files.

CSS Pre-processors

We use PostCSS to support CSS transformations and future-standards-compliant CSS.

By default, we support the following PostCSS plugins:

JavaScript

We support importing JavaScript-related files with the following file extensions: .js, .mjs, .cjs, .jsx, .ts, .tsx.
All these files are processed with Babel with our custom preset @commercetools-frontend/babel-preset-mc-app.

GraphQL

We support importing GraphQL files with the file extension: .graphql.
See Use GraphQL documents.

Custom Webpack config

At times your application might require some extra functionality. For example, loading a particular file extension, using a specific Webpack plugin, or including other source files in your repository.

To extend the functionalities of Webpack, you can define specific files in the root of your customization project for both development and production.

Development

For development mode, create a webpack.config.dev.{js,cjs} file and use the function createWebpackConfigForDevelopment to create and enhance the Webpack configuration.

The customization CLI will then use the configuration exported from this file instead of the default one.

webpack.config.dev.cjsJavascript
const {
  createWebpackConfigForDevelopment,
} = require('@commercetools-frontend/mc-scripts/webpack');

// Create the default config
const config = createWebpackConfigForDevelopment();

// Customize the config
config.module.rules = config.module.rules.concat({
  test: /\.scss$/,
  use: [
    require.resolve('style-loader'),
    require.resolve('css-loader'),
    require.resolve('sass-loader'),
  ],
});

// Export the config
module.exports = config;

Production

For production mode, create a webpack.config.prod.{js,cjs} file and use the function createWebpackConfigForProduction to create and enhance the Webpack configuration.

The customization CLI will then use the configuration exported from this file instead of the default one.

webpack.config.prod.cjsJavascript
const {
  createWebpackConfigForProduction,
} = require('@commercetools-frontend/mc-scripts/webpack');

// Create the default config
const config = createWebpackConfigForProduction();

// Customize the config
config.module.rules = config.module.rules.concat({
  test: /\.scss$/,
  use: [
    require.resolve('style-loader'),
    require.resolve('css-loader'),
    require.resolve('sass-loader'),
  ],
});

// Export the config
module.exports = config;

Options

Use custom source folders

You can provide a list of folders path to be included when Webpack scans your project for source files by making use of the sourceFolders option.
The default folders configuration includes the ./src folder.
Passing the sourceFolders option will override the default value.
webpack.config.dev.cjsJavascript
const path = require('path');

const sourceFolders = [
  path.resolve(__dirname, 'src'),
  path.resolve(__dirname, '../shared'),
];

const config = createWebpackConfigForDevelopment({ sourceFolders });

module.exports = config;