A plugin that makes handling templates and asset distribution for multi-page applications using webpack trivial
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
dist/src
examples
src
test
.editorconfig
.gitignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

multipage-webpack-plugin

Build Status Coverage Status

webpack plugin that allows for trivial configuration for multi page web applications

Problem

Currently to architect a webpack configuration for multi page web applications, there are many requirements for managing all assets and entry points.

  • In a multipage application every rendered page corresponds to a webpack entry point.

  • Each entry point will have some sort of index.html file or a MVC framework specific server template (partial) which renders to html content.

    • May have different paths, may not even be in the same directory as the entry point.
    • Should contain just the assets bundled for that entry.
    • You would have to create essentially a html-webpack-plugin for each entry however posses extra configuration challenges:

    An example for a Laravel 4 Application using Twig Templates

    const templatesFn = (modules, twigRoot, assetsRoot, shared) => {
      return Object.keys(modules).map((entryName) => {
        return new HtmlWebpackPlugin({
          template: `${assetsRoot}/webpack.template.hbs`, //path.resolve(__dirname, "./assets/webpack.template.hbs"),
          filename: `${twigRoot}/webpack-bundles/${entryName}.twig`,
          chunks: ['inline', 'vendors', entryName, `${shared}`]
        })
      });
    } 
    

Development

  • npm install

Single Test Build

  • npm t

Test Watch

  • npm run test:watch

Usage [WIP]

Plugin Options [WIP]

sharedChunkName vendorChunkName inlineChunkName templateFilename templatePath htmlTemplatePath