assets-webpack-plugin

What is assets-webpack-plugin?

The assets-webpack-plugin is a Webpack plugin that generates a JSON file containing the paths of the output files. This is useful for server-side rendering or when you need to inject the assets into your HTML manually.

What are assets-webpack-plugin's main functionalities?

Generate JSON file with asset paths

This feature allows you to generate a JSON file that contains the paths of the output files. This is useful for server-side rendering or when you need to inject the assets into your HTML manually.

const AssetsWebpackPlugin = require('assets-webpack-plugin');

module.exports = {
  // other webpack configuration
  plugins: [
    new AssetsWebpackPlugin({
      path: path.join(__dirname, 'dist'),
      filename: 'assets.json'
    })
  ]
};

Customizing the output format

This feature allows you to customize the format of the generated JSON file. For example, you can enable pretty printing to make the JSON file more readable.

const AssetsWebpackPlugin = require('assets-webpack-plugin');

module.exports = {
  // other webpack configuration
  plugins: [
    new AssetsWebpackPlugin({
      path: path.join(__dirname, 'dist'),
      filename: 'assets.json',
      prettyPrint: true
    })
  ]
};

Including additional information

This feature allows you to include additional information in the generated JSON file. For example, you can specify which file types to include in the JSON file.

const AssetsWebpackPlugin = require('assets-webpack-plugin');

module.exports = {
  // other webpack configuration
  plugins: [
    new AssetsWebpackPlugin({
      path: path.join(__dirname, 'dist'),
      filename: 'assets.json',
      includeAllFileTypes: false,
      fileTypes: ['js', 'css']
    })
  ]
};

Other packages similar to assets-webpack-plugin

html-webpack-plugin

The html-webpack-plugin simplifies the creation of HTML files to serve your webpack bundles. It automatically injects the output files into the HTML file. Unlike assets-webpack-plugin, which generates a JSON file with asset paths, html-webpack-plugin directly creates an HTML file with the necessary script and link tags.

webpack-manifest-plugin

The webpack-manifest-plugin generates a manifest file that maps the original filenames to the hashed filenames. This is similar to assets-webpack-plugin, but it focuses on creating a manifest file for cache busting and long-term caching.

webpack-assets-manifest

The webpack-assets-manifest plugin generates a JSON file that maps the original filenames to the hashed filenames, similar to assets-webpack-plugin. However, it provides more customization options and supports merging with existing manifest files.

README

assets-webpack-plugin

Webpack plugin that emits a json file with assets paths.

I'm looking for a new maintainer, please contact me if you are interested.

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"
    }
}

Where:

• "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"
    }
}

Install

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

Configuration

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

Options

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

e.g.

/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})

metadata: Inject metadata into the output file. All values will be injected into the key "metadata".

new AssetsPlugin({metadata: {version: 123}})

// Manifest will now contain:
// {
//   metadata: {version: 123}
// }

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();

webpack([
    {
        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 = File.read(path)
  json = JSON.parse(file)
  json[bundle]['js']
end

Then in the actions:

def show
  @script = script_for('clients') # this will retrieve the bundle named 'clients'
end

And finally in the views:

<div id="app">
  <script src="<%= @script %>"></script>
</div>

Test

npm test

Changelog

3.4.0 Do not write to assets file if output hasn't changed

3.2.0 Added processOutput option

3.1.0 Config now accepts a fullPath option.

Changelog

3.4.0 - 2016-03-09

Changed

• Do not write to assets file if output hasn't changed.