Nitrogen Peroxide Monoxide
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

static-generator-webpack-plugin

3.1.2 • Public • Published

static generator webpack plugin


This is a fork of static-site-generator-webpack-plugin that allows for dynamic paths at runtime using webpack contexts.


Minimal, unopinionated static site generator powered by webpack.

Install

$ npm install static-generator-webpack-plugin --save-dev

Usage

Ensure you have webpack installed, e.g. npm install -g webpack

webpack.config.js

const StaticGeneratorPlugin = require('static-generator-webpack-plugin');
 
module.exports = {
  entry: {
    'main': './index.js'
  },
 
  output: {
    filename: 'index.js',
    path: 'dist',
    /* IMPORTANT!
     * You must compile to UMD or CommonJS
     * so it can be required in a Node context: */
    libraryTarget: 'umd'
  },
 
  plugins: [
    new StaticGeneratorPlugin('main', {
      // Properties here are passed to
      // the exported render function
      greet: 'Hello'
    })
  ]
 
};

index.js

// creates an object with filepaths as keys
// and modules as values
function requireAll(context) {
  return context.keys().reduce((modules, key) => {
    modules[key] = context(key);
    return modules;
  }, {});
}
 
module.exports = {
  // expects a render function that takes a module
  // and returns a string
  render: (Page, locals, done) => {
    done(
      null,
      '<!DOCTYPE html>' +
      Dom.renderToStaticMarkup(<Page locals={locals} />)
    )
  },
  // expects an object with input filepaths for keys
  // and module definitions as values
  pages: Object.assign(
    {},
    requireAll(require.context('./pages/', true, /\.jsx$/))
  ),
  // expects a function that defines output path
  // based on input module filepath
  transform: inputPath => {
    return inputPath
      .replace('./', '')
      .replace(/\.jsx/, '.html');
  }
}

Default locals

// The list of input paths being rendered:
locals.paths
 
// The input filepath currently being rendered:
locals.path;
 
// the list of output paths being rendered
locals.outputPaths;
 
// The output filepath currently being rendered:
locals.outputPath;
 
// a helper string for resolving absolute paths 
// to root.  eg. `../..` or `.`
locals.baseHref;
 
// An object containing all assets:
locals.assets;
 
// Advanced: Webpack's stats object:
locals.webpackStats;

Any additional locals provided in your config are also available.

Scope

If required, you can provide an object that will exist in the global scope when executing your render function. This is particularly useful if certain libraries or tooling you're using assumes a browser environment.

For example, when using Webpack's require.ensure, which assumes that window exists:

const scope = { window: {} };
 
module.exports = {
  ...,
  plugins: [
    new StaticGeneratorPlugin('main', locals, scope)
  ]
}

Related projects

License

MIT License

Keywords

none

install

npm i static-generator-webpack-plugin

Downloadsweekly downloads

3

version

3.1.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability