Use Poi to Build an Index.js with Modern JavaScript Features

Customize Poi's Default index.html Template

Configure Poi for Advanced Template Control

Build a Vue App with Poi

Customize Babel to Build a React App with Poi

Compile CSS or Sass with Poi

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

Build and Analyze Your JavaScript Bundles with Poi

Use Poi Presets from npm to Skip Configuration

Setup PostCSS and Tailwind with Poi

Make Webpack Easy with Poi

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.

https://app.egghead.io/api/v1/lessons/react-use-markdown-as-react-components-by-adding-a-webpack-loader-to-poi/subtitles

Instructor: [00:00] Create a markdown file. We'll call this page.md, add some content to it. I'm using markdown page and a content goes here. Then, we can try and load it, we'll say import page from page.md and let it fail, because we don't have a right loader.

[00:22] To add the loader, we'll create our poiconfig.js to our module exports, and there is a property called webpack which passes in the config. Then, we modify the config here and return the config. We want to add a rule on the module, so config module rules, push, and the rule is going to look like this. Test our testing markdown files.

[00:48] The loaders you're going to use are the react-markdown-loader is going to pass into the pebble loader. Make sure and install the react-markdown-loader. We can stop this, start it up again. Now, there are no errors. Instead of just importing it, we can go ahead and use it as a react component. Say, page get save and you can see that my markdown file is being used as a react component.

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

Share this video with your friends

Course

Make Webpack Easy with Poi