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.
Install the plugin with npm:
$ npm install static-render-html-webpack-plugin
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 webpack/output/path/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>
This project is licensed under MIT.