assets-webpack-plugin

Webpack plugin that emits a json file with assets paths.

Table of Contents

• Install
• Why Is This Useful?
  • Example output:
• Configuration
  • Options
    • filename
    • fullPath
    • removeFullPathAutoPrefix
    • includeManifest
    • manifestFirst
    • path
    • useCompilerPath
    • prettyPrint
    • processOutput
    • update
    • metadata
    • includeAllFileTypes
    • fileTypes
    • keepInMemory
    • integrity
    • entrypoints
    • includeFilesWithoutChunk
  • Using in multi-compiler mode
  • Using this with Rails
  • Using this with ASP.NET Core
• Test

Install

⚠️ Starting with version 6, this plugin works with Webpack 5+.

If you are working with an older version of Webpack, you can use the most recent 5.x.x release (5.1.2).

1npm install assets-webpack-plugin --save-dev

If you're using Webpack 4 or below:

1npm install assets-webpack-plugin@5.1.2 --save-dev

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:

1{
2    "bundle_name": {
3        "asset_kind": "/public/path/to/asset"
4    }
5}

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:

1{
2    entry: {
3        one: ['src/one.js'],
4        two: ['src/two.js']
5    },
6    output: {
7        path: path.join(__dirname, "public", "js"),
8        publicPath: "/js/",
9        filename: '[name]_[hash].bundle.js'
10    }
11}

The plugin will output the following json file:

1{
2    "one": {
3        "js": "/js/one_2bb80372ebe8047a68d4.bundle.js"
4    },
5    "two": {
6        "js": "/js/two_2bb80372ebe8047a68d4.bundle.js"
7    }
8}

Configuration

In your webpack config include the plug-in. And add it to your config:

1var path = require('path')
2var AssetsPlugin = require('assets-webpack-plugin')
3var assetsPluginInstance = new AssetsPlugin()
4
5module.exports = {
6    // ...
7    output: {
8        path: path.join(__dirname, "public", "js"),
9        filename: "[name]-bundle-[hash].js",
10        publicPath: "/js/"
11    },
12    // ....
13    plugins: [assetsPluginInstance]
14}

Options

You can pass the following options:

filename

Optional. webpack-assets.json by default.

Name for the created json file.

1new AssetsPlugin({filename: 'assets.json'})

fullPath

Optional. true by default.

If false the output will not include the full path of the generated file.

1new AssetsPlugin({fullPath: false})

e.g.

/public/path/bundle.js vs bundle.js

removeFullPathAutoPrefix

Optional. false by default.

If true the full path will automatically be stripped of the /auto/ prefix generated by webpack.

1new AssetsPlugin({removeFullPathAutoPrefix: true})

e.g.

/public/path/bundle.js vs bundle.js

includeManifest

Optional. false by default.

Inserts the manifest javascript as a text property in your assets. Accepts the name or names 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.

1new AssetsPlugin({includeManifest: 'manifest'})
2// assets.json:
3// {entries: {manifest: {js: `hashed_manifest.js`, text: 'function(modules)...'}}}
4//
5// Your html template:
6// <script>
7// {assets.entries.manifest.text}
8// </script>

The includeManifest option also accepts an array of manifests:

1new AssetsPlugin({includeManifest: ['manifest1', 'manifest2']})
2// assets.json:
3// {entries: {
4//    manifest1: {js: `hashed_manifest.js`, text: 'function(modules)...'},
5//    manifest2: {js: `hashed_manifest.js`, text: 'function(modules)...'}
6// }}

manifestFirst

Optional. false by default.

Orders the assets output so that manifest is the first entry. This is useful for cases where script tags are generated from the assets json output, and order of import is important.

1new AssetsPlugin({manifestFirst: true})

path

Optional. Defaults to the current directory.

Path where to save the created JSON file. Will default to the highest level of the project unless useCompilerPath is specified.

1new AssetsPlugin({path: path.join(__dirname, 'app', 'views')})

useCompilerPath

1new AssetsPlugin({useCompilerPath: true})

Will override the path to use the compiler output path set in your webpack config.

prettyPrint

Optional. false by default.

Whether to format the JSON output for readability.

1new AssetsPlugin({prettyPrint: true})

processOutput

Optional. Defaults is JSON stringify function.

Formats the assets output.

1new AssetsPlugin({
2  processOutput: function (assets) {
3    return 'window.staticMap = ' + JSON.stringify(assets)
4  }
5})

update

Optional. false by default.

When set to true, the output JSON file will be updated instead of overwritten.

1new AssetsPlugin({update: true})

metadata

Inject metadata into the output file. All values will be injected into the key "metadata".

1new AssetsPlugin({metadata: {version: 123}})
2// Manifest will now contain:
3// {
4//   metadata: {version: 123}
5// }

includeAllFileTypes

Optional. true by default.

When set false, falls back to the fileTypes option array to decide which file types to include in the assets file.

1new AssetsPlugin({includeAllFileTypes: false})

fileTypes

Optional. ['js', 'css'] by default.

When set and includeAllFileTypes is set false, only assets matching these types will be included in the assets file.

1new AssetsPlugin({fileTypes: ['js', 'jpg']})

keepInMemory

Optional. false by default.

When set the assets file will only be generated in memory while running webpack-dev-server and not written to disk.

1new AssetsPlugin({keepInMemory: true})

integrity

Optional. false by default.

When set the output from webpack-subresource-integrity is included in the assets file.

Please make sure you have webpack-subresource-integrity installed and included in your webpack plugins.

1new AssetsPlugin({integrity: true})

Output will now look like this:

1{
2  "main": {
3    "js": "/bundle.js",
4    "jsIntegrity": "sha256-ANGwtktWN96nvBI/cjekdTvd0Dwf7SciIFTQ2lpTxGc= sha384-Ly439pF3K+J8hnhk1BEcjKnv1R9BApFYVIVJvr64PcgBjdT4N7hfPzQynItHwcaO"
5  },
6  "vendors~main": {
7    "js": "/1.bundle.js",
8    "jsIntegrity": "sha256-yqNi1hgeAdkXVOORgmVMeX+cbuXikoj6I8qWZjPegsA= sha384-4X75tnsGDwnwL5kBUPsx2ko9DeWy0xM8BcDQdoR185yho+OnxjjPXl2wCdebLWTG"
9  }
10}

entrypoints

Optional. false by default.

If the 'entrypoints' option is given, the output will be limited to the entrypoints and the chunks associated with them.

1new AssetsPlugin({entrypoints: true})

includeFilesWithoutChunk

Optional. false by default.

When set and entrypoints is set true, will output any files that are part of the unnamed chunk to an additional unnamed ("") entry.

1new AssetsPlugin({includeFilesWithoutChunk: true})

includeAuxiliaryAssets

Optional. false by default.

When set, will output any files that are part of the chunk and marked as auxiliary assets.

1new AssetsPlugin({includeAuxiliaryAssets: true})

includeDynamicImportedAssets

Optional. false by default.

When set, will output any files that are part of the chunk and marked as preloadable or prefechtable child assets via a dynamic import. See: https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules

1new AssetsPlugin({includeDynamicImportedAssets: 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:

1var webpack = require('webpack')
2var AssetsPlugin = require('assets-webpack-plugin')
3var assetsPluginInstance = new AssetsPlugin()
4
5webpack([
6  {
7    entry: {one: 'src/one.js'},
8    output: {path: 'build', filename: 'one-bundle.js'},
9    plugins: [assetsPluginInstance]
10  },
11  {
12    entry: {two:'src/two.js'},
13    output: {path: 'build', filename: 'two-bundle.js'},
14    plugins: [assetsPluginInstance]
15  }
16])

Using this with Rails

You can use this with Rails to find the bundled Webpack assets via Sprockets. In ApplicationController you might have:

1def script_for(bundle)
2  path = Rails.root.join('app', 'views', 'webpack-assets.json') # This is the file generated by the plug-in
3  file = File.read(path)
4  json = JSON.parse(file)
5  json[bundle]['js']
6end

Then in the actions:

1def show
2  @script = script_for('clients') # this will retrieve the bundle named 'clients'
3end

And finally in the views:

1<div id="app">
2  <script src="<%= @script %>"></script>
3</div>

Using this with ASP.NET Core

You can use this with ASP.NET Core via the WebpackTag library.

Test

1npm test