rth
react-to-html-webpack
npm i react-to-html-webpack
rth

react-to-html-webpack

Webpack plugin that renders React components to HTML files

by Mark Dalgleish

2.3.0 (see all)License:MITTypeScript:Not Found
npm i react-to-html-webpack
Readme

npm Dependency Status

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

$ npm install --save-dev react-to-html-webpack-plugin

Basic Usage

This basic example assumes that the React component renders <html> as the root element. This works for simple cases, but if you need more fine grained control of the entire document, use the template option instead.

webpack.config.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

var React = require('react');
var MyComponent = require('./MyComponent.jsx');

if (typeof document !== 'undefined') {
  React.render(<MyComponent />, document);
}

/* IMPORTANT!
 * You must export a component: */
module.exports = MyComponent;

Using a hashed source file

webpack.config.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

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:

{
  html: '...',
  assets: {
    chunkName: assetPath,
    ...
  }
}

For example:

var ejs = require('ejs'); // or whatever you like ;)

...

new ReactToHtmlPlugin('index.html', 'index.js', {
  template: function(data) {
    return ejs.render(`
      <html>
        ...
        <body>
          <div id="app">
            <%- html %>
          </div>
          <% for (var chunk in assets) { -%>
          <script src="<%= assets[chunk] %>"></script>
          <% } -%>
        </body>
      </html>
    `, data);
  }
});

static (boolean)

Optionally enable usage of renderToStaticMarkup. This is recommended when you don't plan to run React on the client.

License

MIT License

Downloads/wk

2

GitHub Stars

166

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

4

OPEN PRs

2
VersionTagPublished
2.3.0
latest
7yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate