Для работы с MDX в проекте на Webpack необходимо использовать набор специализированных загрузчиков (loaders) и плагинов. Основным инструментом является @mdx-js/loader, который преобразует файлы с расширением .mdx в валидный JavaScript-код, совместимый с React-компонентами.

Пример установки зависимостей через npm:

npm install @mdx-js/loader @mdx-js/react --save-dev

После установки необходимо настроить загрузку файлов .mdx в конфигурации Webpack:

module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx?$/,
        use: [
          'babel-loader',
          {
            loader: '@mdx-js/loader',
            /** 
             * Опции loader-а позволяют управлять тем, как MDX будет обрабатываться.
             * Пример: подключение remark-плагинов для дополнительной обработки Markdown.
             */
            options: {
              remarkPlugins: [],
              rehypePlugins: [],
            },
          },
        ],
      },
    ],
  },
};

Здесь ключевым моментом является последовательность загрузчиков: сначала babel-loader, чтобы транспилировать JSX, затем @mdx-js/loader для конвертации MDX в React-компоненты.

Интеграция MDX с React

После конфигурации Webpack файлы MDX можно импортировать как обычные React-компоненты:

import { MDXProvider } from '@mdx-js/react';
import Content from './content.mdx';

const components = {
  h1: (props) => 
,
  p: (props) => 
,
};

function App() {
  return (
    
      
    
  );
}

Использование MDXProvider позволяет переопределять стандартные теги Markdown на собственные React-компоненты, настраивать стили и расширять функциональность.

Настройка Babel для MDX

Для корректной работы MDX необходимо, чтобы Babel был настроен на поддержку JSX и современного JavaScript. Основные плагины и пресеты:

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
  ],
};

Эта конфигурация обеспечивает транспиляцию кода MDX и позволяет использовать современные возможности JS без проблем совместимости с браузерами.

Использование Remark и Rehype плагинов

MDX поддерживает расширение синтаксиса Markdown с помощью плагинов remark и rehype. Например, можно подключить плагин для подсветки синтаксиса:

const remarkPrism = require('remark-prism');

module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx?$/,
        use: [
          'babel-loader',
          {
            loader: '@mdx-js/loader',
            options: {
              remarkPlugins: [remarkPrism],
            },
          },
        ],
      },
    ],
  },
};

remarkPlugins обрабатывают исходный Markdown до конвертации в JSX, а rehypePlugins позволяют модифицировать уже сгенерированный HTML, например, для добавления классов или атрибутов.

Оптимизация сборки MDX с Webpack

При работе с большим количеством файлов MDX рекомендуется:

1. Использовать cache-loader перед babel-loader для ускорения повторной сборки.
2. Включать include и exclude в правилах Webpack, чтобы ограничить обработку только необходимыми папками.
3. Настроить splitChunks в Webpack для выделения MDX-контента в отдельные чанки при динамическом импорте:

optimization: {
  splitChunks: {
    cacheGroups: {
      mdx: {
        test: /\.mdx$/,
        name: 'mdx-content',
        chunks: 'all',
      },
    },
  },
}

Такой подход позволяет ускорить загрузку страниц и уменьшить общий размер основного бандла.

Динамический импорт MDX

MDX-файлы могут быть загружены по требованию через import(). Это удобно для документации, блога или учебных материалов:

import React, { Suspense } from 'react';

const Content = React.lazy(() => import('./content.mdx'));

function App() {
  return (
    Загрузка...