{"id":13493816,"url":"https://github.com/ztoben/assets-webpack-plugin","last_synced_at":"2025-05-14T13:06:19.719Z","repository":{"id":20963429,"uuid":"24252178","full_name":"ztoben/assets-webpack-plugin","owner":"ztoben","description":"Webpack plugin that emits a json file with assets paths","archived":false,"fork":false,"pushed_at":"2025-03-03T12:35:30.000Z","size":638,"stargazers_count":955,"open_issues_count":36,"forks_count":104,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-08T15:44:21.094Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/assets-webpack-plugin","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ztoben.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":"contributing.md","funding":null,"license":"license.md","code_of_conduct":"code_of_conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2014-09-20T02:56:06.000Z","updated_at":"2025-02-10T15:09:41.000Z","dependencies_parsed_at":"2024-01-13T18:00:36.359Z","dependency_job_id":"ca95491a-3f0f-4360-85ea-63c0aa6a0df0","html_url":"https://github.com/ztoben/assets-webpack-plugin","commit_stats":{"total_commits":485,"total_committers":45,"mean_commits":"10.777777777777779","dds":0.6783505154639176,"last_synced_commit":"2d438a73cd7578f2edcc7145eba0f10db25738fa"},"previous_names":["sporto/assets-webpack-plugin"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ztoben%2Fassets-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ztoben%2Fassets-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ztoben%2Fassets-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ztoben%2Fassets-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ztoben","download_url":"https://codeload.github.com/ztoben/assets-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149953,"owners_count":22022851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:01:19.101Z","updated_at":"2025-05-14T13:06:19.693Z","avatar_url":"https://github.com/ztoben.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# assets-webpack-plugin\n\n[![version](https://img.shields.io/npm/v/assets-webpack-plugin.svg)](https://npmjs.org/package/assets-webpack-plugin)\n[![downloads](https://img.shields.io/npm/dt/assets-webpack-plugin.svg)](https://npmjs.org/package/assets-webpack-plugin)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Build Status](https://travis-ci.org/ztoben/assets-webpack-plugin.svg?branch=master)](https://travis-ci.org/ztoben/assets-webpack-plugin)\n[![Build status](https://ci.appveyor.com/api/projects/status/sbchndv12vk45mo3?svg=true)](https://ci.appveyor.com/project/ztoben/assets-webpack-plugin)\n\nWebpack plugin that emits a json file with assets paths.\n\n## Table of Contents\n\n* [Install](#install)\n* [Why Is This Useful?](#why-is-this-useful)\n  * [Example output:](#example-output)\n* [Configuration](#configuration)\n  * [Options](#options)\n    * [`filename`](#filename)\n    * [`fullPath`](#fullpath)\n    * [`removeFullPathAutoPrefix`](#removefullpathautoprefix)\n    * [`includeManifest`](#includemanifest)\n    * [`manifestFirst`](#manifestfirst)\n    * [`path`](#path)\n    * [`useCompilerPath`](#usecompilerpath)\n    * [`prettyPrint`](#prettyprint)\n    * [`processOutput`](#processoutput)\n    * [`update`](#update)\n    * [`metadata`](#metadata)\n    * [`includeAllFileTypes`](#includeallfileTtypes)\n    * [`fileTypes`](#filetypes)\n    * [`keepInMemory`](#keepinmemory)\n    * [`integrity`](#integrity)\n    * [`entrypoints`](#entrypoints)\n    * [`includeFilesWithoutChunk`](#includefileswithoutchunk)\n  * [Using in multi-compiler mode](#using-in-multi-compiler-mode)\n  * [Using this with Rails](#using-this-with-rails)\n  * [Using this with ASP.NET Core](#using-this-with-aspnet-core)\n* [Test](#test)\n\n## Install\n\n⚠️ Starting with version 6, this plugin works with Webpack 5+.\n\nIf you are working with an older version of Webpack, you can use the most recent 5.x.x release (`5.1.2`).\n\n```sh\nnpm install assets-webpack-plugin --save-dev\n```\n\nIf you're using Webpack 4 or below:\n\n```sh\nnpm install assets-webpack-plugin@5.1.2 --save-dev\n```\n\n## Why Is This Useful?\n\nWhen working with Webpack you might want to generate your bundles with a generated hash in them (for cache busting).\n\nThis plug-in outputs a json file with the paths of the generated assets so you can find them from somewhere else.\n\n### Example output:\n\nThe output is a JSON object in the form:\n\n```json\n{\n    \"bundle_name\": {\n        \"asset_kind\": \"/public/path/to/asset\"\n    }\n}\n```\n\nWhere:\n\n* `\"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).\n* `\"asset_kind\"` is the camel-cased file extension of the asset\n\nFor example, given the following webpack config:\n\n```js\n{\n    entry: {\n        one: ['src/one.js'],\n        two: ['src/two.js']\n    },\n    output: {\n        path: path.join(__dirname, \"public\", \"js\"),\n        publicPath: \"/js/\",\n        filename: '[name]_[hash].bundle.js'\n    }\n}\n```\n\nThe plugin will output the following json file:\n\n```json\n{\n    \"one\": {\n        \"js\": \"/js/one_2bb80372ebe8047a68d4.bundle.js\"\n    },\n    \"two\": {\n        \"js\": \"/js/two_2bb80372ebe8047a68d4.bundle.js\"\n    }\n}\n```\n\n## Configuration\n\nIn your webpack config include the plug-in. And add it to your config:\n\n```js\nvar path = require('path')\nvar AssetsPlugin = require('assets-webpack-plugin')\nvar assetsPluginInstance = new AssetsPlugin()\n\nmodule.exports = {\n    // ...\n    output: {\n        path: path.join(__dirname, \"public\", \"js\"),\n        filename: \"[name]-bundle-[hash].js\",\n        publicPath: \"/js/\"\n    },\n    // ....\n    plugins: [assetsPluginInstance]\n}\n```\n\n### Options\n\nYou can pass the following options:\n\n#### `filename`\n\nOptional. `webpack-assets.json` by default.\n\nName for the created json file.\n\n```js\nnew AssetsPlugin({filename: 'assets.json'})\n```\n\n#### `fullPath`\n\nOptional. `true` by default.\n\nIf `false` the output will not include the full path\nof the generated file.\n\n```js\nnew AssetsPlugin({fullPath: false})\n```\n\ne.g.\n\n`/public/path/bundle.js` vs `bundle.js`\n\n#### `removeFullPathAutoPrefix`\n\nOptional. `false` by default.\n\nIf `true` the full path will automatically be stripped of the `/auto/` prefix generated by webpack.\n\n```js\nnew AssetsPlugin({removeFullPathAutoPrefix: true})\n```\n\ne.g.\n\n`/public/path/bundle.js` vs `bundle.js`\n\n#### `includeManifest`\n\nOptional. `false` by default.\n\nInserts the manifest javascript as a `text` property in your assets.\nAccepts the name or names of your manifest chunk. A manifest is the last CommonChunk that\nonly contains the webpack bootstrap code. This is useful for production\nuse when you want to inline the manifest in your HTML skeleton for long-term caching.\nSee [issue #1315](https://github.com/webpack/webpack/issues/1315)\nor [a blog post](https://medium.com/@matt.krick/a-production-ready-realtime-saas-with-webpack-7b11ba2fa5b0#.p1vvfr3bm)\nto learn more.\n\n```js\nnew AssetsPlugin({includeManifest: 'manifest'})\n// assets.json:\n// {entries: {manifest: {js: `hashed_manifest.js`, text: 'function(modules)...'}}}\n//\n// Your html template:\n// \u003cscript\u003e\n// {assets.entries.manifest.text}\n// \u003c/script\u003e\n```\n\nThe `includeManifest` option also accepts an array of manifests:\n\n```js\nnew AssetsPlugin({includeManifest: ['manifest1', 'manifest2']})\n// assets.json:\n// {entries: {\n//    manifest1: {js: `hashed_manifest.js`, text: 'function(modules)...'},\n//    manifest2: {js: `hashed_manifest.js`, text: 'function(modules)...'}\n// }}\n```\n\n#### `manifestFirst`\n\nOptional. `false` by default.\n\nOrders the assets output so that manifest is the first entry. This is useful for cases where script tags are generated\nfrom the assets json output, and order of import is important.\n\n```js\nnew AssetsPlugin({manifestFirst: true})\n```\n\n#### `path`\n\nOptional. Defaults to the current directory.\n\nPath where to save the created JSON file. Will default to the highest level of the project unless useCompilerPath is specified.\n\n```js\nnew AssetsPlugin({path: path.join(__dirname, 'app', 'views')})\n```\n\n#### `useCompilerPath`\n\n```js\nnew AssetsPlugin({useCompilerPath: true})\n```\n\nWill override the path to use the compiler output path set in your webpack config.\n\n#### `prettyPrint`\n\nOptional. `false` by default.\n\nWhether to format the JSON output for readability.\n\n```js\nnew AssetsPlugin({prettyPrint: true})\n```\n\n#### `processOutput`\n\nOptional. Defaults is JSON stringify function.\n\nFormats the assets output.\n\n```js\nnew AssetsPlugin({\n  processOutput: function (assets) {\n    return 'window.staticMap = ' + JSON.stringify(assets)\n  }\n})\n```\n\n#### `update`\n\nOptional. `false` by default.\n\nWhen set to `true`, the output JSON file will be updated instead of overwritten.\n\n```js\nnew AssetsPlugin({update: true})\n```\n\n#### `metadata`\n\nInject metadata into the output file. All values will be injected into the key \"metadata\".\n\n```js\nnew AssetsPlugin({metadata: {version: 123}})\n// Manifest will now contain:\n// {\n//   metadata: {version: 123}\n// }\n```\n\n#### `includeAllFileTypes`\n\nOptional. `true` by default.\n\nWhen set false, falls back to the `fileTypes` option array to decide which file types to include in the assets file.\n\n```js\nnew AssetsPlugin({includeAllFileTypes: false})\n```\n\n#### `fileTypes`\n\nOptional. `['js', 'css']` by default.\n\nWhen set and `includeAllFileTypes` is set false, only assets matching these types will be included in the assets file.\n\n```js\nnew AssetsPlugin({fileTypes: ['js', 'jpg']})\n```\n\n#### `keepInMemory`\n\nOptional. `false` by default.\n\nWhen set the assets file will only be generated in memory while running `webpack-dev-server` and not written to disk.\n\n```js\nnew AssetsPlugin({keepInMemory: true})\n```\n\n#### `integrity`\n\nOptional. `false` by default.\n\nWhen set the output from [webpack-subresource-integrity](https://github.com/waysact/webpack-subresource-integrity) is included in the assets file.\n\nPlease make sure you have `webpack-subresource-integrity` installed and included in your webpack plugins.\n\n```js\nnew AssetsPlugin({integrity: true})\n```\n\nOutput will now look like this:\n\n```json\n{\n  \"main\": {\n    \"js\": \"/bundle.js\",\n    \"jsIntegrity\": \"sha256-ANGwtktWN96nvBI/cjekdTvd0Dwf7SciIFTQ2lpTxGc= sha384-Ly439pF3K+J8hnhk1BEcjKnv1R9BApFYVIVJvr64PcgBjdT4N7hfPzQynItHwcaO\"\n  },\n  \"vendors~main\": {\n    \"js\": \"/1.bundle.js\",\n    \"jsIntegrity\": \"sha256-yqNi1hgeAdkXVOORgmVMeX+cbuXikoj6I8qWZjPegsA= sha384-4X75tnsGDwnwL5kBUPsx2ko9DeWy0xM8BcDQdoR185yho+OnxjjPXl2wCdebLWTG\"\n  }\n}\n```\n\n#### `entrypoints`\n\nOptional. `false` by default.\n\nIf the 'entrypoints' option is given, the output will be limited to the entrypoints and the chunks associated with them.\n\n```js\nnew AssetsPlugin({entrypoints: true})\n```\n\n#### `includeFilesWithoutChunk`\n\nOptional. `false` by default.\n\nWhen set and `entrypoints` is set true, will output any files that are part of the unnamed chunk to an additional unnamed (\"\") entry.\n\n```js\nnew AssetsPlugin({includeFilesWithoutChunk: true})\n```\n\n#### `includeAuxiliaryAssets`\n\nOptional. `false` by default.\n\nWhen set, will output any files that are part of the chunk and marked as auxiliary assets.\n\n```js\nnew AssetsPlugin({includeAuxiliaryAssets: true})\n```\n\n#### `includeDynamicImportedAssets`\n\nOptional. `false` by default.\n\nWhen set, will output any files that are part of the chunk and marked as preloadable or prefechtable child assets via a dynamic import.\nSee: https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules\n\n```js\nnew AssetsPlugin({includeDynamicImportedAssets: true})\n```\n\n### Using in multi-compiler mode\n\nIf you use webpack multi-compiler mode and want your assets written to a single file,\nyou __must__ use the same instance of the plugin in the different configurations.\n\nFor example:\n\n```js\nvar webpack = require('webpack')\nvar AssetsPlugin = require('assets-webpack-plugin')\nvar assetsPluginInstance = new AssetsPlugin()\n\nwebpack([\n  {\n    entry: {one: 'src/one.js'},\n    output: {path: 'build', filename: 'one-bundle.js'},\n    plugins: [assetsPluginInstance]\n  },\n  {\n    entry: {two:'src/two.js'},\n    output: {path: 'build', filename: 'two-bundle.js'},\n    plugins: [assetsPluginInstance]\n  }\n])\n```\n\n### Using this with Rails\n\nYou can use this with Rails to find the bundled Webpack assets via Sprockets.\nIn `ApplicationController` you might have:\n\n```ruby\ndef script_for(bundle)\n  path = Rails.root.join('app', 'views', 'webpack-assets.json') # This is the file generated by the plug-in\n  file = File.read(path)\n  json = JSON.parse(file)\n  json[bundle]['js']\nend\n```\n\nThen in the actions:\n\n```ruby\ndef show\n  @script = script_for('clients') # this will retrieve the bundle named 'clients'\nend\n```\n\nAnd finally in the views:\n\n```erb\n\u003cdiv id=\"app\"\u003e\n  \u003cscript src=\"\u003c%= @script %\u003e\"\u003e\u003c/script\u003e\n\u003c/div\u003e\n```\n\n### Using this with ASP.NET Core\n\nYou can use this with ASP.NET Core via the [WebpackTag](https://d.sb/webpacktag) library.\n\n## Test\n\n```sh\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fztoben%2Fassets-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fztoben%2Fassets-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fztoben%2Fassets-webpack-plugin/lists"}