add-assets-to-json-webpack-plugin v2.0.1

Add Assets to JSON Webpack Plugin

Webpack plugin that creates a json file with your asset data.

Install

npm install add-assets-to-json-webpack-plugin --save-dev

Basic Config

new AddAssetsToJSON({
    path: path.resolve(__dirname, 'assets', 'json')
})

Config With removePreviousAssetNames

new AddAssetsToJSON({
    filename: 'assets.json',
    path: path.resolve(__dirname, 'assets', 'json'),
    removePreviousAssetNames: ['app.*.js']
})

Note: this plugin only keeps unique assets based off the name of the asset. So removePreviousAssetNames is only necessary if you want to remove a previous asset sciprt name like app.[chunkhash].js.

Options

*Required field

Examples

Basic Example

// config 
new AddAssetsToJSON({
    path: path.resolve(__dirname, 'assets', 'json')
})

// previous assets json file
[
    {name: 'app.chunk1.js'},
    {name: 'app.chunk2.js'}
]

// new assets json file
[
    {name: 'app.chunk2.js'}, 
    {name: 'app.chunk3.js'}
]

// generated json file
[
    {name: 'app.chunk1.js'},
    {name: 'app.chunk2.js'}, 
    {name: 'app.chunk3.js'}
]

Notice that it keeps previously saved assets, doesn't append asset names that already exist, and adds new asset names that don't exist.

Example With removePreviousAssetNames

// config 
new AddAssetsToJSON({
    path: path.resolve(__dirname, 'assets', 'json'),
    removePreviousAssetNames: ['app.*.js']
})

// previous assets json file
[
    {name: 'vendor.chunkHash.js'},
    {name: 'app.chunkHash.js'}
]

// new assets json file
[
    {name: 'app.chunkHashThatsDifferent.js'}
]

// generated json file
[
    {name: 'vendor.chunkHash.js'},
    {name: 'app.chunkHashThatsDifferent.js'}
]

Notice that this example removes a previous asset name that was matched with matcher.

Couple Caveats with removePreviousAssetNames:

• It won't remove a previous asset if the match also does not find the same match in the new assets that webpack generates. It would seem to me that this would be an unintended behavior to remove something without replacing it with another asset name.
• It won't remove any new assets that were generated from webpack, only assets that were in your previous json file.