assets-webpack-plugin
Webpack plugin that emits a json file with assets paths.
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:
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 publicPath: "/js/" filename: '[name]_[hash].bundle.js'
The plugin will output the following json file:
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 = ;var AssetsPlugin = ;var assetsPluginInstance = ; moduleexports = // ... output: path: path 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
filename: 'assets.json'
fullPath: True by default. If false the output will not include the full path of the generated file.
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.
path: path
prettyPrint: Whether to format the json output for readability. Defaults to false.
prettyPrint: true
processOutput: Formats the assets output. Defaults is JSON stringify function.
{ return 'window.staticMap = ' + JSON; }
update: When set to true, the output json file will be updated instead of overwritten. Defaults to false.
update: true
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 = ;var AssetsPlugin = ;var assetsPluginInstance = ; ;
Using this with Rails
You can use this with Rails to find the bundled Webpack assets via sprockets. In ApplicationController
you might have:
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:
@script = script_for('clients') # this will retrieve the bundle named 'clients' end
And finally in the views:
Test
npm test
Changelog
3.2.0 Added processOutput
option
3.1.0 Config now accepts a fullPath
option.