https://github.com/4catalyzer/react-static-page-webpack-plugin
https://github.com/4catalyzer/react-static-page-webpack-plugin
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/4catalyzer/react-static-page-webpack-plugin
- Owner: 4Catalyzer
- License: mit
- Created: 2019-03-06T00:08:04.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-03T12:44:00.000Z (8 months ago)
- Last Synced: 2024-10-12T20:43:03.651Z (7 months ago)
- Language: JavaScript
- Size: 525 KB
- Stars: 1
- Watchers: 6
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ReactStaticPageWebpackPlugin
A webpack plugin that generates an html page from a react component
## Usage
```sh
yarn add react-static-page-webpack-plugin -D
```
**webpack.config.js**
```js
exports = {
entry './src/static-page.js',
output: {
libraryTarget: 'commonjs'
}
plugins: [
new ReactStaticPageWebpackPlugin({
fileName: 'static-index.html',
title: 'My Page Title',
props: {
customerName: 'Sally'
}
}),
],
};
```
And in `./src/static-page.js`:
```js
import React from 'react';
export default function StaticPage({ customerName }) {
return Hi there: {customerName};
}
```
When running the webpack build `static-index.html` will be written to your output folder.
### Options
- `chunk`: Specific the entry chunk that returns the body component you want to render, optional, will use the first chunk when omitted
- `fileName`: The output file name
- `title`: A page title placed in teh ``
- `meta`: a _string_ of meta tags placed into the document ``
- `props`: An set of props that is passed to your component.
### Why use a webpack chunk?
The reason we use an entry chunk (instead of providing a filename to the component) is so you can leaverage your existing webpack config for styling, and compilation.