Custom Webpack Config

By default Custom Applications include a webpack configuration to handle most of the common features like code transformation via Babel, loading CSS modules, loading images and SVGs, loading GraphQL documents, etc.

However, it could be that your application requires some extra functionality like loading a particular file type, using a specific webpack plugin or include other source files in your repository.

To extend the functionalities of webpack, you can define specific files in the root of your Custom Application project.

Usage

The webpack configuration can be customized 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 Custom Application 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 Custom Application 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;