manifest-assets-webpack-plugin
v4.0.0
Published
Emits a json file with assets paths
Downloads
2
Maintainers
Readme
assets-webpack-plugin
Webpack plugin that emits a json file with assets paths.
Table of Contents
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:
{
"entries": {
"bundle_name": {
"asset_kind": "/public/path/to/asset"
}
},
"assets": [{
"name": "hello.svg",
"path": "/public/path/to/asset/hello.svg"
}
]
}
Where:
entries
is an object that contains all entry points listed in your webpack config"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
assets
is an array containing all assets processed by webpackname
is the name of the image (path used inrequire
orimport
)path
is the webpack generated public path to the image
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'
}
}
and import of an image somewhere in application code using
import user from '../../assets/images/user.svg';
The plugin will output the following json file:
{
"one": {
"js": "/js/one_2bb80372ebe8047a68d4.bundle.js"
},
"two": {
"js": "/js/two_2bb80372ebe8047a68d4.bundle.js"
},
"assets":[{
"name":"assets/images/user.svg",
"path":"/js/assets/images/user.svg"
}]
}
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
includeManifest: Inserts the manifest javascript as a text
property in your assets.
False by default. Accepts the name of your manifest chunk.
A manifest is the last CommonChunk that only contains the webpack bootstrap code.
This is useful for production use when you want to inline the manifest in your HTML skeleton for long-term caching.
See issue #1315
or a blog post
to learn more.
// webpack.config.js
new AssetsPlugin({includeManifest: 'manifest'});
//assets.json
{entries: {manifest: {js: `hashed_manifest.js`, text: 'function(modules)...'}}}
// your html template
<script>
{assets.entries.manifest.text}
</script>
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}
// }
assetsRegex: Regex for assets that should be extracted from Webpack stats. Defaults to /\.(jpe?g|png|gif|svg)$/
new AssetsPlugin({assetsRegex: /\.(svg)$/})
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['entries'][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