Emits a json file with assets paths

Downloads in past


003.4.08 years ago8 years agoMinified + gzip package size for assets-webpack-plugin-zl in KB


Codeship Status for sporto/assets-webpack-plugin
Webpack plugin that emits a json file with assets paths.

Why is this useful?

When working with Webpack you might want to generate your bundles with a generated hash in them (for cache busting).
This plug-in outputs a json file with the paths of the generated assets so you can find them from somewhere else.

Example output:

The output is a JSON object in the form:
    "bundle_name": {
        "asset_kind": "/public/path/to/asset"

"bundle_name" is the name of the bundle (the key of the entry object in your webpack config, or "main" if your entry is an array). "asset_kind" is the camel-cased file extension of the asset
For example, given the following webpack config:
    entry: {
        one: ['src/one.js'],
        two: ['src/two.js']
    output: {
        path: path.join(__dirname, "public", "js"),
        publicPath: "/js/",
        filename: '[name]_[hash].bundle.js'

The plugin will output the following json file:
    "one": {
        "js": "/js/one_2bb80372ebe8047a68d4.bundle.js"
    "two": {
        "js": "/js/two_2bb80372ebe8047a68d4.bundle.js"


npm install assets-webpack-plugin --save-dev


In your webpack config include the plug-in. And add it to your config:
var path = require('path');
var AssetsPlugin = require('assets-webpack-plugin');
var assetsPluginInstance = new AssetsPlugin();

module.exports = {
    // ...
    output: {
        path: path.join(__dirname, "public", "js"),
        filename: "[name]-bundle-[hash].js",
        publicPath: "/js/"
    // ....
    plugins: [assetsPluginInstance]


You can pass the following options:
filename: Name for the created json file. Defaults to webpack-assets.json
new AssetsPlugin({filename: 'assets.json'})

fullPath: True by default. If false the output will not include the full path of the generated file.
new AssetsPlugin({fullPath: false})

/public/path/bundle.js vs bundle.js vs
path: Path where to save the created json file. Defaults to the current directory.
new AssetsPlugin({path: path.join(__dirname, 'app', 'views')})

prettyPrint: Whether to format the json output for readability. Defaults to false.
new AssetsPlugin({prettyPrint: true})

processOutput: Formats the assets output. Defaults is JSON stringify function.
new AssetsPlugin({
    processOutput: function (assets) {
        return 'window.staticMap = ' + JSON.stringify(assets);

update: When set to true, the output json file will be updated instead of overwritten. Defaults to false.
new AssetsPlugin({update: true})

Using in multi-compiler mode

If you use webpack multi-compiler mode and want your assets written to a single file, you must use the same instance of the plugin in the different configurations.
For example:
var webpack = require('webpack');
var AssetsPlugin = require('assets-webpack-plugin');
var assetsPluginInstance = new AssetsPlugin();

        entry: {one: 'src/one.js'},
        output: {path: 'build', filename: 'one-bundle.js'},
        plugins: [assetsPluginInstance]
        entry: {two:'src/two.js'},
        output: {path: 'build', filename: 'two-bundle.js'},
        plugins: [assetsPluginInstance]

Using this with Rails

You can use this with Rails to find the bundled Webpack assets via sprockets. In ApplicationController you might have:
def script_for(bundle)
  path = Rails.root.join('app', 'views', 'webpack-assets.json') # This is the file generated by the plug-in
  file =
  json = JSON.parse(file)

Then in the actions:
def show
  @script = script_for('clients') # this will retrieve the bundle named 'clients'

And finally in the views:
<div id="app">
  <script src="<%= @script %>"></script>


npm test


3.2.0 Added processOutput option
3.1.0 Config now accepts a fullPath option.