[Poi] Use Markdown as React Components by Adding a Webpack Loader to Poi

时间:2021-12-09 20:24:21

Poi ships with many webpack loaders included, but you may run into scenarios where you'll need to customize and add your own. This lesson covers adding react-markdown-loader to Poi to load Markdown files as React components.

 

Install:

npm i -D react-markdown-loader

 

poi.config.js:

module.exports = {
    webpack(config) {
        config.module.rules.push({
           test: '/.md$/',
           loaders: [
               'babel-loader',
               'react-markdown-loader'
           ]
       })

        return config;
    }       
}

 

import Page from './Page.md'
import {render} from 'react-dom';

render(
  <Page></Page>,
   document.getElementById('app')      
);