Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markdalgleish/react-to-html-webpack-plugin
Webpack plugin that renders React components to HTML files
https://github.com/markdalgleish/react-to-html-webpack-plugin
Last synced: 29 days ago
JSON representation
Webpack plugin that renders React components to HTML files
- Host: GitHub
- URL: https://github.com/markdalgleish/react-to-html-webpack-plugin
- Owner: markdalgleish
- License: mit
- Created: 2015-02-25T04:46:54.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-11-21T13:51:14.000Z (about 8 years ago)
- Last Synced: 2024-11-07T11:25:14.172Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 18.6 KB
- Stars: 168
- Watchers: 5
- Forks: 14
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# DEPRECATED - Use [static-site-generator-webpack-plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin) instead.
[](https://npmjs.org/package/react-to-html-webpack-plugin) [](https://david-dm.org/markdalgleish/react-to-html-webpack-plugin)
# React-to-HTML Webpack Plugin
Webpack plugin that renders React components to HTML files.
Components are rendered after all source files have been compiled, so JSX works without any issues.
*Warning! This plugin executes your code in a Node context after each compilation.*
## Install
```bash
$ npm install --save-dev react-to-html-webpack-plugin
```
## Basic Usage
This basic example assumes that the React component renders `` as the root element. This works for simple cases, but if you need more fine grained control of the entire document, use the [`template`](#template-function) option instead.
### webpack.config.js
```js
var ReactToHtmlPlugin = require('react-to-html-webpack-plugin');
module.exports = {
entry: './index.jsx',
output: {
filename: 'index.js',
path: 'dist',
/* IMPORTANT!
* You must compile to UMD or CommonJS
* so it can be required in a Node context: */
library: 'MyComponentExample',
libraryTarget: 'umd'
},
module: {
loaders: [
{ test: /\.jsx$/, loader: 'jsx-loader' }
]
},
plugins: [
new ReactToHtmlPlugin('index.html', 'index.js')
]
};
```
### index.jsx
```js
var React = require('react');
var MyComponent = require('./MyComponent.jsx');
if (typeof document !== 'undefined') {
React.render(, document);
}
/* IMPORTANT!
* You must export a component: */
module.exports = MyComponent;
```
## Using a hashed source file
### webpack.config.js
```js
var ReactToHtmlPlugin = require('react-to-html-webpack-plugin');
module.exports = {
entry: {
main: './index.js'
},
output: {
filename: 'assets/[hash].js',
path: 'dist',
/* IMPORTANT!
* You must compile to UMD or CommonJS
* so it can be required in a Node context: */
library: 'MyComponentExample',
libraryTarget: 'umd'
},
module: {
loaders: [
{ test: /\.jsx$/, loader: 'jsx-loader' }
]
},
plugins: [
// Note: "index.js" is not used, instead use "main" which is the name of the entry
// Using "index.js" would result in a file not found error because it has been hashed
new ReactToHtmlPlugin('index.html', 'main')
]
};
```
## API
```js
new ReactToHtmlPlugin('index.html', 'index.js', { options... });
```
### Options
#### template (`function`)
You can optionally provide a function that returns an HTML string.
The template is called with the following data:
```js
{
html: '...',
assets: {
chunkName: assetPath,
...
}
}
```
For example:
```js
var ejs = require('ejs'); // or whatever you like ;)
...
new ReactToHtmlPlugin('index.html', 'index.js', {
template: function(data) {
return ejs.render(`
...
<%- html %>
<% for (var chunk in assets) { -%>
<% } -%>
`, data);
}
});
```
#### static (`boolean`)
Optionally enable usage of [renderToStaticMarkup](https://facebook.github.io/react/docs/top-level-api.html#react.rendertostaticmarkup). This is recommended when you don't plan to run React on the client.
## License
[MIT License](http://markdalgleish.mit-license.org)