Static-render-html-webpack-plugin NPM

Static Render HTML Webpack Plugin

This is a webpack plugin that simplifies creation of HTML static files using webpack. It will be useful if you are creating a PWA and you need as quickly as possible to show the user first paint.

Installation

Install the plugin with npm:

$ npm install static-render-html-webpack-plugin --save-dev

Basic Usage

var StaticRenderHtmlWebpackPlugin = require('static-render-html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'main.js'
  },
  plugins: [
    new StaticRenderHtmlWebpackPlugin({
        entry: path.join(__dirname, './shells/index.jsx');
    })
  ]
};

// index.jsx
import React from 'react';

const IndexPage = (props) => (
  <html lang="en">
    <head>
      <meta charSet="utf-8" />
      <title>
        Website title
      </title>
    </head>
    <body>
      <div id=""root>
        <span>
	        Index page
        </span>
      </div>
    </body>
  </html>
);

export default {
  index: <IndexPage />,
};

This will generate a file dist/index.html containing the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charSet="utf-8" />
    <title>
      Website title
    </title>
  </head>
  <body>
    <div id=""root>
      <span>
         Index page
      </span>
    </div>
  </body>
</html>