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 = ;const staticBuildConfig = ;
Each site entry be matched to the sites build entries and added to its index.html
entry: // site entry home: path // site entry product: path // style asset referenced by index.html's style: path // vendor chunked .js asset referenced by index.html's vendor: Object
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: // These will be output as assets.webpack.vendor and assets.webpack.manifest in the template names: 'vendor' 'manifest' minChunks: Infinity buildConfig {}
Example Configuration
Example configuration file
/** * Template used to generate index.html files. See example below. */const template = ; // Reducersconst product_reducer = ;const content_reducer = ; 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 indexjson // This is a copy of /en_US/home.json /en_US homejson // /en_US/home/index.html explorejson // /en_US/explore/index.html /products product_1json // /en_US/products/product_1/index.html product_2json // /en_US/products/product_2/index.html product_3json // /en_US/products/product_3/index.html /en_US homejson // /es_US/home/index.html explorejson // /es_US/explore/index.html /products product_1json // /es_US/products/product_1/index.html product_2json // /es_US/products/product_2/index.html product_3json // /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>} * } * **/ { return ` <html lang="en"> <head> <title>My Store</title> <script> window.__data = ; </script> </head> <link rel="stylesheet" type="text/css" href="/" /> <body id="body"> <div id="app"> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="/"></script> <script src="/"></script> <script src=""></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 mappingTest/add webpack-dev-server supportChange template to accept generic objectsLocale needs to be handled better.- Abstract state management so users have more flexibility.
Page Builders
Base paths for data directoriesSupport localization in builder functions to reduce configuration noise (Partially complete)- Validation around configuration (Partially complete)
Remove multiPage flag in favor of a better architecture