@modern-js/doc-tools-doc/docs/en/guide/advanced/extend-build.mdx

Website for @modern-js/doc-tools

# Build Extension

## Modern.js Builder

Modern.js Doc builds documents based on the Rspack mode of [Modern.js Builder](https://modernjs.dev/builder/en/).

Modern.js Builder provides flexible build configurations, you can use [doc.builderConfig](/api/config/config-build.html#builderconfig) to customize these configurations. For example, change the output directory to `doc_dist`:

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';

export default defineConfig({
  doc: {
    builderConfig: {
      output: {
        distPath: {
          root: 'doc_dist',
        },
      },
      tools: {
        rspack(options) {
          // 修改 rspack 的配置
        },
      },
    },
  },
  plugins: [docTools()],
});
```

:::tip

You can learn more configurations through the [Modern.js Builder - API](https://modernjs.dev/builder/en/api/index.html) documentation.

Note that Modern.js Doc only supports Rspack bundler, so some configurations related to webpack will not work, such as `tools.webpack`. Of course, you can use the `tools.rspack` to customize the Rspack config.

:::

## MDX Compilation

The compilation of MDX in the framework is based on [unified](https://github.com/unifiedjs/unified), and you can add related compilation plugins through `markdown` configuration. for example
:

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';

export default defineConfig({
  doc: {
    markdown: {
      remarkPlugins: [
        [
          require('remark-autolink-headings'),
          {
            behavior: 'wrap',
          },
        ],
      ],
      rehypePlugins: [require('rehype-slug')],
    },
  },
  plugins: [docTools()],
});
```