node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »


Build Status Coverage Status dependencies Status

Super Awesome Webpack Plugin

A slightly opinionated Webpack plugin for generating static websites using React, React Router & Redux.


  • Currently only tested on node v6.3.1 & 7
  • < 3.0.0
    • Webpack 1
  • 3.0.0 - Webpack 2


npm install --save-dev super-awesome-webpack-plugin



Require plugin & build config

const SuperAwesomeWebpackPlugin = require('super-awesome-webpack-plugin');
const staticBuildConfig = require('./static.config');

Each site entry be matched to the sites build entries and added to its index.html

entry: {
    // site entry 
    home: path.join(__dirname, 'src/js/sites/order/home.js'),
    // site entry 
    product: path.join(__dirname, 'src/js/sites/order/product.js'),
    // style asset referenced by index.html's 
    style: path.join(__dirname, 'src/less', 'styles.less'),
    // vendor chunked .js asset referenced by index.html's 
    vendor: Object.keys(require('./package.json').dependencies)

New up the plugin and add it to the plugin array. The first parameter is the site configuration and the second parameter takes a webpack configuration object (everything in the site configuration is ran through webpack).

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        // These will be output as assets.webpack.vendor and assets.webpack.manifest in the template 
        names: ['vendor', 'manifest'],
        minChunks: Infinity
    new SuperAwesomeWebpackPlugin(buildConfig, {})

Example Configuration

Example configuration file

 * Template used to generate index.html files. See example below.
const template = require('./template');
// Reducers 
const product_reducer = require('./src/js/redux/reducers/product');
const content_reducer = require('./src/js/redux/reducers/content');
const staticConfig = {
  dataDir: './data',
  sites: [
        // All pages under this site will share this entry, template, and reducers 
        entry: 'main',
        component: './src/js/components/pages/Wrapper', // wrapper component that wraps each route component 
         * This is a bit of a hack, but until a better solution can be found this will work.
         * The plugin will look for a data file named 'index.json' at the base of dataDir and relate
         * it to this indexRoute.
        indexRoute: { component: './src/js/components/pages/Home' }
        pages: [
             * Pages dictate what index.html's get created. Each page must have a matching
             * .JSON file at /[dataDir]/[route].
             * NOTE: If you use multiple pages per entry you will need to use something like react-router
             * to properly serve the correct page in the client.
             * This site will generate four pages.
             * - /en_US/home/index.html
             * - /es_US/home/index.html
             * - /en_US/explore/index.html
             * - /es_US/explore/index.html
            { route: '/*/home', component: './src/js/components/pages/Home' },
            { route: '/*/explore', component: './src/js/components/pages/Explore' }
        reducers: { content: content_reducer }
      entry: 'product',
      component: layout_component,
      pages: [
        { route: '/*/menu/product/*', component: './src/js/components/pages/Product'},
      reducers: { product: product_reducer, content: content_reducer }

Example Data Directory

    index.json // This is a copy of /en_US/home.json 
        home.json // /en_US/home/index.html 
        explore.json // /en_US/explore/index.html 
            product_1.json // /en_US/products/product_1/index.html 
            product_2.json // /en_US/products/product_2/index.html 
            product_3.json // /en_US/products/product_3/index.html 
        home.json // /es_US/home/index.html 
        explore.json // /es_US/explore/index.html 
            product_1.json // /es_US/products/product_1/index.html 
            product_2.json // /es_US/products/product_2/index.html 
            product_3.json // /es_US/products/product_3/index.html 

Example Template File

 * Template must be a function that accepts a single configuration and returns a string.
 * assets = {
 *  html: <rendered html page>,
 *  state: <state object>,
 *  app: <path to js file>,
 *  webpack: {<all assets generated during webpack bundling>}
 * }
export default function (assets) {
    return `
    <html lang="en">
            <title>My Store</title>
                window.__data = ${JSON.stringify(assets.state)};
        <link rel="stylesheet" type="text/css" href="/${'js', 'css')}" />
        <body id="body">
            <div id="app">
            <script src=""></script>
            <script src="/${assets.webpack.manifest}"></script>
            <script src="/${assets.webpack.vendor}"></script>
            <script src="${}"></script>



  • Create example site
  • Tests & coverage reports


  • Handle ES6 modules more seamlessly
  • Add ability to define asset-to-template mapping.
  • Integrate with react-router for configuration field mapping
  • Test/add webpack-dev-server support
  • Change template to accept generic objects
  • Locale needs to be handled better.
  • Abstract state management so users have more flexibility.

Page Builders

  • Base paths for data directories
  • Support localization in builder functions to reduce configuration noise (Partially complete)
  • Validation around configuration (Partially complete)
  • Remove multiPage flag in favor of a better architecture # super-awesome-webpack-plugin-example-site