# Module bundler

Built-in module bundler for developing Merchant Center customizations.

The Merchant Center customization tooling uses [Webpack](https://webpack.js.org/) 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](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/module-bundler.md#custom-webpack-config).

## 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

```typescript
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`.

```typescript
import Image from './image.react.svg';

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

#### PNG

```typescript
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:

```typescript
import './style.css';
```

### CSS Modules

We recommend that you define styles using [CSS Modules](https://github.com/css-modules/css-modules). This allows styles to be locally scoped to each module with a unique class name, thereby avoiding naming collisions.

```typescript
import * as styles from './style.module.css';

const Component = () => <div className={styles.container}></div>;
```

```css title="style.module.css"
.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](https://postcss.org/) to support CSS transformations and future-standards-compliant CSS.

By default, we support the following PostCSS plugins:

- `autoprefixer`: plugin to parse CSS and add vendor prefixes to CSS rules using values from [Can I Use](https://caniuse.com/).
- `postcss-custom-media`: plugin to enable Custom Media Queries in CSS, following the [CSS Media Queries](https://www.w3.org/TR/mediaqueries-5/#custom-mq) specification.
- `postcss-custom-properties`: plugin to enable Custom Properties in CSS, following the [CSS Custom Properties](https://www.w3.org/TR/css-variables-1/) specification.
- `postcss-import`: plugin to transform `@import` rules by inlining content.

### 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](https://docs.commercetools.com/merchant-center-customizations/development/data-fetching.md#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.

```js title="webpack.config.dev.cjs"
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.

```js title="webpack.config.prod.cjs"
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.

```js title="webpack.config.dev.cjs"
const path = require('path');

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

const config = createWebpackConfigForDevelopment({ sourceFolders });

module.exports = config;
```

## Related pages

- [Section overview page](https://docs.commercetools.com/merchant-center-customizations.md)
- [Previous page: Custom View Config](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-view-config.md)