static-site-generator-webpack-plugin

3.4.2 verified Sat Apr 25 auth: no javascript maintenance

Minimal, unopinionated static site generator powered by webpack (v3.4.2, last updated Apr 2018). Compiles a custom render function with webpack and executes it for each path to produce static HTML files. Supports React/React Router universal rendering, automatic crawling of links, async rendering via callbacks or promises, and flexible multi-file output. Key differentiators: leaves rendering entirely to the user, works with any view library, and integrates tightly with webpack's build pipeline. Alternatives like Gatsby or Next.js are more opinionated and feature-rich.

Common errors

error Error: No render function exported from bundle. ↓

cause The entry module does not export a function, or bundle is not correctly compiled.

fix

Ensure your entry file exports a function (module.exports = ...) and output.libraryTarget is set to 'umd' or 'commonjs2'.

error TypeError: Cannot read property 'assetsByChunkName' of undefined ↓

cause The plugin expects webpack stats object with 'assetsByChunkName' property, which may be missing in newer webpack versions.

fix

Use an older version of webpack (3.x) or check plugin compatibility with webpack 4+.

error Error: Cannot find module 'xxx' ↓

cause This plugin assumes the compiled bundle is executed in a Node environment, but it may be missing dependencies that are not bundled (e.g., 'react-dom/server').

fix

Ensure all required dependencies are either bundled (via webpack externals) or available in the Node environment where webpack runs.

Warnings

gotcha The plugin requires webpack output.libraryTarget to be 'umd' or 'commonjs2', otherwise the render function cannot be required in Node context. ↓

fix Set output.libraryTarget: 'umd' in webpack config.

gotcha The plugin expects a single JS entry module. With code splitting or multiple entries, you may need to use the 'entry' option or select a specific chunk for rendering. ↓

fix Ensure entry outputs a single bundle that contains the render function, or use the 'entry' option to specify which entry to use.

deprecated Webpack 4 compatibility was added in v3.4.0 via hooks API, but the plugin still relies on deprecated or changed APIs in webpack 5. ↓

fix For webpack 5, consider alternatives like 'html-webpack-plugin' or custom plugin; this plugin may not work correctly.

gotcha The 'crawl' option may follow external links, leading to infinite crawling or unintended pages being fetched. It only follows relative links and iframes. ↓

fix Use the 'paths' option for explicit control, or ensure crawler only targets relative URLs within your site.

Install

npm install static-site-generator-webpack-plugin

yarn add static-site-generator-webpack-plugin

pnpm add static-site-generator-webpack-plugin

Imports

StaticSiteGeneratorPlugin

wrong

import StaticSiteGeneratorPlugin from 'static-site-generator-webpack-plugin';

correct

const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');

The plugin does not export an ES module; use CommonJS require. There is no default export for ES imports.

Quickstart

Configures webpack to generate static HTML files for /hello/ and /world/ using a simple render function.

// webpack.config.js
const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './render.js',
  output: {
    filename: 'render.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd'
  },
  plugins: [
    new StaticSiteGeneratorPlugin({
      paths: ['/hello/', '/world/'],
      locals: { greet: 'Hello' }
    })
  ]
};

// render.js
module.exports = (locals) => {
  return `<html>${locals.greet} from ${locals.path}</html>`;
};