stevematney / asset-map-webpack-plugin

Webpack plugin that creates a map of assets to public url slug for server agnostic usage.

Webpack Asset Map Plugin

Creates a json file that any server side technology can consume for asset declarations. Example output file:

{
  "assets": {
    "./smiley.jpeg": "/assets/smiley-db4f287d06928156270ca185fef0e026.jpeg",
    "./test-checklist.jpeg": "/assets/test-checklist-b3b0fe76f4485db43467876f664d1f62.jpeg"
  },
  "chunks": {
    "index": [
      "/assets/index-2c9c445686f51177cf62.js"
      "/assets/index-2c9c445686f51177cf62.css"
    ]
  }
}

The key is the relative path from the generated file to the image location in your source location. The value is the public url slug generated by webpack.

Usage

Add to the plugins array in your webpack config:

var AssetMapPlugin = require('asset-map-webpack-plugin');

module.exports = {
  ...
  plugins: [
    /**
     * AssetMapPlugin
     *
     * @param {string} outputFile - Where to write the asset map file
     * @param {string} [relativeTo] - Key assets relative to this path, otherwise defaults to be relative to the directory where the outputFile is written
     */
    new AssetMapPlugin(outputFilename, relativeTo)
  ]
};