Nerfing Powerful Megalomaniacs
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    super-awesome-webpack-pluginpublic

    Build Status Coverage Status dependencies Status

    Super Awesome Webpack Plugin

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

    Requirements

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

    Install

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

    Setup

    webpack.config.js

    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',
            template,
            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',
          template,
          component: layout_component,
          pages: [
            { route: '/*/menu/product/*', component: './src/js/components/pages/Product'},
          ],
          reducers: { product: product_reducer, content: content_reducer }
        }
      ]
    };

    Example Data Directory

    /data
        index.json // This is a copy of /en_US/home.json 
        /en_US
            home.json // /en_US/home/index.html 
            explore.json // /en_US/explore/index.html 
            /products
                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 
        /en_US
            home.json // /es_US/home/index.html 
            explore.json // /es_US/explore/index.html 
            /products
                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">
            <head>
                <title>My Store</title>
                <script>
                    window.__data = ${JSON.stringify(assets.state)};
                </script>
            </head>
            <link rel="stylesheet" type="text/css" href="/${assets.webpack.style.replace('js', 'css')}" />
            <body id="body">
                <div id="app">
                    ${assets.html}
                </div>
                <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
                <script src="/${assets.webpack.manifest}"></script>
                <script src="/${assets.webpack.vendor}"></script>
                <script src="${assets.app}"></script>
            </body>
        </html>
        `
    }

    TODO

    Project

    • Create example site
    • Tests & coverage reports

    Core

    • 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

    install

    npm i super-awesome-webpack-plugin

    Downloadslast 7 days

    1

    version

    3.0.6

    license

    ISC

    repository

    github.com

    last publish

    collaborators

    • avatar