Skip to content

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

Notifications You must be signed in to change notification settings

subying/asset-map-webpack-plugin

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Webpack Asset Map Plugin

Build Status

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)
  ]
};

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 98.9%
  • CSS 1.1%