gray-matter-loader
Webpack loader for extracting front-matter using gray-matter
Benefits
-
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.
-
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.gitcd gray-matter-loaderyarncd exampleyarn 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.