html-renderer-webpack-plugin
Advanced tools
A webpack plugin for emitting html files from a list of paths.
npm install --save-dev html-renderer-webpack-plugin
yarn add --dev html-renderer-webpack-plugin
This plugin provides a server-like environment for rendering static (React) html pages. It is useful for serverless environments as a static site generator.
Pages are rendered from the supplied paths: string[] | () => Promise<string[]> argument, that should include your supported (static) routes. It might be useful to import these from your router configuration. The paths options can either be a list of strings, or an async function. The latter is useful for dynamically generating paths during built-time, for example from a directory structure.
The plugin is supplied an async renderer function that, for example, renders your pages using react-dom's renderToString and returns a complete HTML string. The default renderer function simply returns a page with Webpack's generated bundles and an empty <div id="root> tag.
import HtmlRendererWebpackPlugin from 'html-renderer-webpack-plugin';
...
config.output.publicPath = '/';
...
config.plugins.push(new HtmlRendererWebpackPlugin({
options: {
isProduction: process.env.NODE_ENV === 'production'
},
paths: [
'/', // --> index.html
'/about', // --> about.html
'/portfolio/' // --> portfolio/index.html
],
renderer: './src/renderer.tsx'
}));
| Option | type | description |
|---|---|---|
options | any | Pass any values from the webpack config to the renderer function |
paths | string[] | () => Promise<string[]> | The paths to be renderer, like "/" and "/about" |
renderer | string | Renderer | A file path to the renderer function, or an inline function. See below for more options. |
export default async ({ path }) => `<html>
<head>
<title>Page for ${path}</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>`
| Option | type | description |
|---|---|---|
assets | `Record<string, string[] | undefined>` |
compilationAssets | import("webpack").Compilation["assets"] | the current compilation's assets |
filename | string | The filename for the current html file, like "index.html" or "about.html" |
options | any | Any value passed from the webpack config |
path | string | The current path, like "/" or "/about" |
publicPath | string | The webpack public path prefix, like "" or "/public" |
stats | any | The current compilation's JSON stats |
Because your renderer function typically imports your <App />, you probably need babel. The easiest way is to run your webpack config through babel with webpack --config webpack.config.babel.js.
The renderer option can point to a file (string) that will be required before each compilation. This plugin will automatically delete all changed files from the require.cache, meaning the emitted html files should always be up-to-date even during watch mode.
FAQs
A webpack plugin for rendering static html pages
The npm package html-renderer-webpack-plugin receives a total of 88 weekly downloads. As such, html-renderer-webpack-plugin popularity was classified as not popular.
We found that html-renderer-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
Research
/Security News
Ongoing npm supply chain attack spreads to DuckDB: multiple packages compromised with the same wallet-drainer malware.
Security News
The MCP Steering Committee has launched the official MCP Registry in preview, a central hub for discovering and publishing MCP servers.