This Webpack plugin will generate a JSON file that matches the original filename with the hashed version.
npm install webpack-assets-manifest --save
In your webpack config, require the plugin then add an instance to the plugins
array.
new WebpackAssetsManifest({
output: 'manifest.json',
replacer: null,
space: 2,
writeToDisk: false,
fileExtRegex: /\.\w{2,4}\.(?:map|gz)$|\.\w+$/i,
sortManifest: true,
merge: false,
publicPath: ''
});
option | type | default | description |
---|---|---|---|
assets |
object |
{} |
Data is stored in this object. |
output |
string |
manifest.json |
Where to save the manifest file relative to your webpack output.path . |
replacer |
null , function , or array |
null |
Replacer reference |
space |
int |
2 |
Number of spaces to use for pretty printing. |
writeToDisk |
boolean |
false |
Write the manifest to disk using fs during after-emit |
fileExtRegex |
regex |
`/.\w{2,4}.(?:map | gz)$ |
sortManifest |
boolean , function |
true |
Should the manifest be sorted? If a function is provided, it will be used as the comparison function. |
merge |
boolean |
false |
If the output file already exists, should the data be merged with it? |
publicPath |
string , function |
'' |
Value prefix or callback to customize the value. |
If you're using another language for your site and you're using webpack-dev-server
to process your assets during development, you should set writeToDisk
to true
and provide an absolute path in output
so the manifest file is actually written to disk and not kept only in memory.
You can share data between instances by passing in your own object in the assets
option.
This is useful in multi-compiler mode.
var data = Object.create(null);
var manifest1 = new WebpackAssetsManifest({
assets: data
});
var manifest2 = new WebpackAssetsManifest({
assets: data
});
If you have a json
file you'd like to add to, you can do that with the merge
option.
If your json
file is not in ${output.path}/manifest.json
, you should specify where the file is with the output
option.
new WebpackAssetsManifest({
output: '/path/to/manifest.json',
merge: true
});
The manifest is sorted alphabetically by default. You can turn off sorting by setting sortManifest
to false
.
If you want more control over how the manifest is sorted, you can provide your own comparison function. In the example below, the manifest will be sorted by file extension then alphabetically.
new WebpackAssetsManifest({
output: 'manifest.json',
space: 2,
sortManifest: function(a, b) {
var extA = this.getExtension(a);
var extB = this.getExtension(b);
if ( extA > extB ) {
return 1;
}
if ( extA < extB ) {
return -1;
}
return a.localeCompare(b);
}
});
You can customize the value that gets saved to the manifest by using publicPath
.
One common use is to prefix your CDN URL to the value.
var manifest = new WebpackAssetsManifest({
publicPath: '//cdn.example.com'
});
If you'd like to have more control, use a function. The example below shows how you can prefix a different CDN based on the file extension.
var manifest = new WebpackAssetsManifest({
publicPath: function( val, manifest ) {
switch( manifest.getExtension( val ).substr(1).toLowerCase() ) {
case 'jpg': case 'jpeg': case 'gif': case 'png': case 'svg':
return '//img-cdn.example.com' + val;
break;
case 'css':
return '//css-cdn.example.com' + val;
break;
case 'js':
return '//js-cdn.example.com' + val;
break;
default:
return '//cdn.example.com' + val;
}
}
});
You can customize the manifest by adding your own event listeners. The manifest is passed as the first argument so you can do whatever you need to with it.
You can use has(key)
, get(key)
, set(key, value)
, and delete(key)
methods on manifest plugin instance to manage what goes into the manifest.
var manifest = new WebpackAssetsManifest();
manifest.on('apply', function(manifest) {
manifest.set('some-key', 'some-value');
});
manifest.on('done', function(manifest, stats) {
console.log(`The manifest has been written to ${manifest.getOutputPath()}`);
console.log(stats); // Compilation stats
});
These event listeners can also be set by passing them in the constructor options.
new WebpackAssetsManifest({
done: function(manifest, stats) {
console.log(`The manifest has been written to ${manifest.getOutputPath()}`);
console.log(stats); // Compilation stats
}
});
name | listener signature |
---|---|
apply |
function(manifest){} |
moduleAsset |
function(manifest, key, hashedFile, module){} |
processAssets |
function(manifest, assets){} |
done |
function(manifest, stats){} |
In this example, manifest.json
will be saved in the folder defined in output.path
.
var WebpackAssetsManifest = require('webpack-assets-manifest');
module.exports = {
entry: {
main: "./your-main-file",
},
output: {
path: path.join( __dirname, 'public', 'assets' ),
filename: '[name]-[hash].js',
chunkFilename: '[id]-[hash].js',
publicPath: 'assets/'
},
module: {
// Your loader rules go here.
},
plugins: [
new WebpackAssetsManifest()
]
};
{
"main.js": "main-9c68d5e8de1b810a80e4.js",
"main.css": "main-9c68d5e8de1b810a80e4.css",
"images/logo.svg": "images/logo-b111da4f34cefce092b965ebc1078ee3.svg"
}