Builder Config

Builder provides a wealth of configs to help users customize the build behavior.

Config Categories

Builder Configs are divided into the following categories:

You can find detailed descriptions of all configs on the API Reference page.

Default Values

The Builder presets a default value for each config, and the default value is suitable for most scenarios. At the same time, the upper-level framework will also override some of the default values based on the requirements of the vertical scene.

In most cases, you don't need to define any Builder config, just use it right out of the box.

Use Config

In the Upper Framework

When you use a Builder-based upper-level framework, you can define the Builder config directly through the framework's config file, and the upper-level framework will pass the config to the Builder.

For example, in the Modern.js framework, you can define the Builder's source.alias config in modern.config.ts file.

modern.config.ts
export default {
  source: {
    alias: {
      '@common': './src/common',
    },
  },
};

Using the Node API

When you call the Builder through the Node API, you can pass in the Builder config through the Provider's builderConfig option:

import { builderWebpackProvider } from '@modern-js/builder-webpack-provider';

const provider = builderWebpackProvider({
  builderConfig: {
    // some configs
  },
});

Please refer to API - createBuilder for details.

Relationship with Framework Config

Generally speaking, the Builder config is a subset of the framework config.

Builder config only deals with build-related behaviors, while framework config covers a wider range, including runtime, server, deployment, etc., so framework config is extended from Builder config.

Debug the config

You can enable Builder's debug mode by adding the DEBUG=builder environment variable when executing a build.

DEBUG=builder pnpm dev

In debug mode, Builder will write the Builder config to the dist directory, which is convenient for developers to view and debug.

Inspect config succeed, open the following files to view the content: - Builder Config: /Project/demo/dist/builder.config.js - Webpack Config (web): /Project/demo/dist/webpack.config.web.js

Open the generated /dist/builder.config.js file to see the complete content of the Builder config.

For a complete introduction to debug mode, see the Debug Mode chapter.