assets-webpack-plugin

Table of Contents

Why Is This Useful?

Install

Configuration

Test

Change Log

Contributing Guidelines

Contributors

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]

}