React to html webpack plugin

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.

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

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 option instead.

var ReactToHtmlPlugin = require('webpack-plugin-react-to-html');
 
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')
 ]
 
>;

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

var ReactToHtmlPlugin = require('webpack-plugin-react-to-html');
 
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')
 ]
 
>;

new ReactToHtmlPlugin('index.html', 'index.js',  options.  >);

You can optionally provide a function that returns an HTML string.

The template is called with the following data:

 html: '. ',
 assets: 
 chunkName: assetPath,
 . 
 >
>

var ejs = require('ejs'); // or whatever you like ;)
 
. 
 
new ReactToHtmlPlugin('index.html', 'index.js', 
 template: function(data) 
 return ejs.render(`
 
 . 
 
 
 
 
  -%>
 
 
 `, data);
 >
>);

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

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Webpack plugin that renders React components to HTML files

License

markdalgleish/react-to-html-webpack-plugin

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

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.

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

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 option instead.

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') ] >;

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

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') ] >;

new ReactToHtmlPlugin('index.html', 'index.js',  options. >);

You can optionally provide a function that returns an HTML string.

The template is called with the following data:

 html: '. ', assets:  chunkName: assetPath, . > >

var ejs = require('ejs'); // or whatever you like ;) . new ReactToHtmlPlugin('index.html', 'index.js',  template: function(data)  return ejs.render(`  .      -%>   `, data); > >);

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

Источник

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.

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

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 option instead.

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')
 ]
 
>;

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

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')
 ]
 
>;

new ReactToHtmlPlugin('index.html', 'index.js',  options.  >);

You can optionally provide a function that returns an HTML string.

The template is called with the following data:

 html: '. ',
 assets: 
 chunkName: assetPath,
 . 
 >
>

var ejs = require('ejs'); // or whatever you like ;)
 
. 
 
new ReactToHtmlPlugin('index.html', 'index.js', 
 template: function(data) 
 return ejs.render(`
 
 . 
 
 
 
 
  -%>
 
 
 `, data);
 >
>);

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

Источник

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.

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

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 option instead.

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')
 ]
 
>;

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

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')
 ]
 
>;

new ReactToHtmlPlugin('index.html', 'index.js',  options.  >);

You can optionally provide a function that returns an HTML string.

The template is called with the following data:

 html: '. ',
 assets: 
 chunkName: assetPath,
 . 
 >
>

var ejs = require('ejs'); // or whatever you like ;)
 
. 
 
new ReactToHtmlPlugin('index.html', 'index.js', 
 template: function(data) 
 return ejs.render(`
 
 . 
 
 
 
 
  -%>
 
 
 `, data);
 >
>);

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

Источник