gray-matter-loader

Webpack loader for extracting front-matter using gray-matter

Benefits

1. Faster render: The webpack loader runs at build time to pre-compile your front matter into json files for faster loading, removing the step to convert them at run-time.

2. Smaller bundle: There is no need to bundle gray-matter in you application anymore. Thus, saving you ~44kb of bundle size, see bundlephobia: gray-matter

Usage:

Add gray-matter-loader to your project:

yarn add --dev gray-matter-loader

Add a rule in the webpack config of the project to use gray-matter-loader for files from which we need to extract the front-matter

module: {
  rules: [
    {
      test: /\.md$/,
      use: [{ loader: "gray-matter-loader" }],
    },
  ];
}

After this, when you import file in you application you will get the parsed file in the following format:

  "content": "Sample page content\n---\n\nRest on content from page\n",
  "data": {
    "title": "Sample",
    "description": "this is sample description"
  },
  "isEmpty": false,
}

The data property of the object has the front-matter and the content of the file is the content property.

For further read please read docs for gray-matter

Using example

We have added an example project in this repo for testing. To run follow the following steps:

git clone https://github.com/ajaymathur/gray-matter-loader.git
cd gray-matter-loader
yarn
cd example
yarn webpack --watch

Now open the index.html file in the example folder in a browser to see the output. Go ahead and edit sample.md and/ or webapck.config.js to test different use cases.