Файл Front Matter в Webpack

Устоявшийся формат статей о статической генерации сайтов

В контексте CMS «Front Matter» — это метаданные (в основном YAML) с содержимым Markdown. Вероятно, Джекил принес или популяризировал.

---
title: Awesome Title
description: Front Matter is good to have meta data for md
nested:
  something: It's nested, could be picked with "nested.something"
---
# First Header
## Second Header
Paragraph.

Передний вопрос | Jekyll • Простые статические сайты с поддержкой блогов
https://jekyllrb.com/docs/frontmatter/

{
  test: /\.md$/,
  loaders: [
    'json-loader',
    'front-matter-loader'
  ]
}

front-matter-loader разбирает *.md файл с помощью front-matter module. Тогда проанализированные данные будут в формате JSON, чтобы Webpack мог их читать, связывая json-loader.

Front Matter-ed Markdown – (front-matter-loader) – JSON – (json-loader) – JS Object

Оригинальный (может быть, от Jekyll?) Front Matter имеет раздел метаданных как YAML, разделенный с помощью --- как сверху, так и снизу. Ниже размещается источник уценки.

---
title: Awesome Title
description: Front Matter is good to have meta data for md
nested:
  something: It's nested, could be picked with "nested.something"
---
# First Header
## Second Header
Paragraph.

Передним модулем этот файл awesome.md будет проанализирован следующим образом:

import fmd from "awesome.md"
fmd.attributes.title //=> "Awesome Title"
fmd.attributes.nested.something //=> "It's nested, could..."
fmd.body //=> "# First Header\n\n## Second..."

Часть тела по-прежнему представляет собой простую строку, поэтому дополнительно требуется компилятор уценки. Было бы неплохо, если бы эта часть разрешилась загрузчиком и для Webpack, с принятием конфигурации для компилятора Markdown 😉

Только что нашел yaml-frontmatter-loader, который есть в webpack-contrib org на GitHub, и его загрузили чаще, чем front-matter-loader. Оба основаны на модуле фронт-материи, но у фронт-материна-загрузчика есть дополнительные опции для получения только атрибута/уценки.