manifest-revision-webpack-plugin

by nickjj

Write out a manifest file containing your versioned webpack chunks and assets.

128 Stars 34 Forks Last release: Not found ISC License 52 Commits 7 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Build Status

Manifest revision plugin for webpack

Wouldn't it be neat if you could just supply a directory path, install a plugin and now magically all of the assets found were automatically auto-tagged with their md5 value so you can cache them forever?

That's what this plugin does. For example, here's a manifest file that it output:

{
  "publicPath": "http://localhost:2992/assets/",
  "assets": {
    "images/hamburger.svg": "images/hamburger.d2cb0dda3e8313b990e8dcf5e25d2d0f.svg",
    "images/spinner.gif": "images/spinner.37348967baeae34bfa408c1f16794db1.gif",
    "images/touch/apple-touch-icon.png": "images/touch/apple-touch-icon.7326f54bfe6776293f08b34c3a5fde7b.png",
    "images/touch/chrome-touch-icon-192x192.png": "images/touch/chrome-touch-icon-192x192.571f134f59f14a6d298ddd66c015b293.png",
    "images/touch/icon-128x128.png": "images/touch/icon-128x128.7c46d686765c49b813ac5eb34fabf712.png",
    "images/touch/ms-touch-icon-144x144-precomposed.png": "images/touch/ms-touch-icon-144x144-precomposed.452d90b250d6f41a0c8f9db729113ffd.png",
    "images/credit-cards/american-express.png": "images/credit-cards/american-express.8a5ade08365dcc7e5fa39a946bb76ab8.png",
    "images/credit-cards/diners-club.png": "images/credit-cards/diners-club.03afaaa2d75264e332dc28309b7410b9.png",
    "images/credit-cards/discover.png": "images/credit-cards/discover.f89468f36ba1a9080b3bb05b9587d470.png",
    "images/credit-cards/jcb.png": "images/credit-cards/jcb.58f43e5f1fb8c6a4e7e76a17e7824e29.png",
    "images/credit-cards/mastercard.png": "images/credit-cards/mastercard.373e4f1ac72b50605183e8216edde845.png",
    "images/credit-cards/visa.png": "images/credit-cards/visa.26bcf191ee12e711aa540ba8d0c901b7.png",
    "app_js.js": "app_js.5018c3226e10bf313701.js",
    "app_css.css": "app_css.291431bdd7415f9ff51d.css"
  }
}

Custom output formats

What if you could easily format the output of the above file so it worked with existing frameworks such as Ruby on Rails? Sure, no problem buddy.

What if you want a custom output format that's not included? Again, no problem. Just pass in a function as the format option and it will get used. This is explained in more detail below in the API section.

Here's what's included

  • Assets include their logical paths for easy lookups on your server
  • You only have to keep track of your asset server in 1 place (your webpack config)
  • It's as small as possible and provides just enough info to do what it's intended to do
  • Supports multiple output formats

Installation

npm install --save manifest-revision-webpack-plugin

Quick start

var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');

// Where are your assets located in your project? This would typically be a path // that contains folders such as: images, stylesheets and javascript. var rootAssetPath = './src/client';

module.exports = { module: { loaders: [ { test: /.(jpe?g|png|gif|svg)$/i, loaders: [ 'file?context=' + rootAssetPath + '&name=[path][name].[hash].[ext]' ] } ] }, plugins: [ new ManifestRevisionPlugin(path.join('build', 'manifest.json'), { rootAssetPath: rootAssetPath, ignorePaths: ['/stylesheets', '/javascript'] }) ] };

API

  • rootAssetPath
    defines where it should start looking for assets.
  • ignorePaths
    is an array of paths to ignore. Path could be a string or regexp.
  • extensionsRegex
    is a regexp for assets you always want to include. Example:
    /\.(jpe?g|png|gif|svg)$/i
  • format
    allows you to pick the manifest output file format.
    • Currently supports
      general
      (default),
      rails
      or passing in a function.

If you want to use a custom function it could look like this:

    // It must take 2 arguments. The first argument is the raw stats provided by
    // Webpack. The second argument is an object list of each asset.
    var myCoolFormatter = function (data, parsedAssets) {
        console.log(data);
        console.log('---');
        console.log(parsedAssets);

    // In this case we're returning an empty result.
    return {};
};

new ManifestRevisionPlugin(path.join('build', 'manifest.json'), {
    rootAssetPath: rootAssetPath,
    ignorePaths: ['/stylesheets', '/javascript'],
    format: myCoolFormatter,
})

Is your custom formatter used in a popular framework?

Great, I would be more than happy to include it in this project. Just send a pull request. Here's the rules for submitting an official formatter:

  • It must have a unit test
  • It must be well documented (follow the other formatter examples)

You would end up modifying the following files:

How would I use the manifest file?

It can be used with any server and any programming language. What you could do is read the

manifest.json
file in once when your app boots up. Then create a template helper that accepts an asset and behind the scenes it will lookup that asset and return back the real file name.

What would that look like on the server?

Ok, let's say you're using the jinja template engine. You've also created a helper called

asset_for
.
Call your template helper in a template:
Hamburger
It will produce this source code:
Hamburger

What would the implementation of that look like?

There's too many web frameworks to include examples. As people use the project it would be nice to create wiki pages that have end to end examples on how to implement it in popular web frameworks.

  • Flask-Webpack: A Flask extension to use this plugin's
    manifest.json
    • Contains a blog post and demo video explaining how to set things up

Contributors

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.