I've cloned the create-react-app and I would like to use the webpack plugin markdown-loader. Can someone please advise me how I would modify the webpack.config.dev.js to do so. Thanks
2 Answers
If you don't want to eject out of create-react-app, it's actually fairly simple to do with loader directives.
- Install
markdown-loaderto turn the markdown into HTML - Install
html-loaderto be able to load HTML into JS
Then:
import YourMarkdown from '!html-loader!markdown-loader!./YOURFILE.md'
export default function MarkdownComponent() {
return <div dangerouslySetInnerHTML={{ __html: YourMarkdown }} />
}
1 Comment
Diarmid Mackenzie
After taking this approach with create-react-app, I hit this error: ERROR in src\views\RevisedLayout.jsx Line 31:1: Unexpected '!' in '!html-loader!./revised-layout.html'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax I was able to wrokaround that by including: /* eslint import/no-webpack-loader-syntax: off */ (as per this answer) stackoverflow.com/questions/45443274/…
Taken from Dan Abramovs' post here: https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html
All the build settings are preconfigured and can’t be changed.
If you wish to modify any of the settings you can Eject from the app.
“Ejecting” lets you leave the comfort of Create React App setup at any time. You run a single command, and all the build dependencies, configs, and scripts are moved right into your project. At this point you can customize everything you want, but effectively you are forking our configuration and going your own way.
npm run eject will cause all the config options to be moved over to your application giving you full control over the config. - This is a one way process.
1 Comment
BigNom
Hi Gerraint, I should of said that I have already ejected from the app. Its more a question of how do I implement using markdown templating with react and webpack?