Documentation

Custom Webpack Config

By default, customizations 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 customization 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 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;