# webpack-assets-info-plugin

> Webpack plugin for generating assets manifest, especially for async chunks generated by code splitting, includes each of the code splitting point source file path info associate with the emitted chunk file.

Latest version **1.0.2** (published 2017-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-assets-info-plugin
pnpm add webpack-assets-info-plugin
yarn add webpack-assets-info-plugin
bun add webpack-assets-info-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2017-10-19 |
| First published | 2017-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jiayang Shen |
| Maintainers | jiayangshen |
| Keywords | spa, webpack, code splitting, async chunk |

## Links

- npm: https://www.npmjs.com/package/webpack-assets-info-plugin
- Repository: https://github.com/JiayangShen/webpack-assets-info-plugin
- Issues: https://github.com/JiayangShen/webpack-assets-info-plugin/issues
- npm.io page: https://npm.io/package/webpack-assets-info-plugin

## Alternatives

- [@commercetools/sync-actions](https://npm.io/package/@commercetools/sync-actions.md) — 25.1K weekly downloads
- [cwait](https://npm.io/package/cwait.md) — 21.4K weekly downloads
- [@ledgerhq/hw-app-cosmos](https://npm.io/package/@ledgerhq/hw-app-cosmos.md) — 4.2K weekly downloads
- [@financial-times/o-loading](https://npm.io/package/@financial-times/o-loading.md) — 2.8K weekly downloads
- [fa](https://npm.io/package/fa.md) — 185 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2017-10-19
- 1.0.1 — 2017-10-19
- 1.0.0 — 2017-10-19

## README

# Webpack Assets Info Plugin


Webpack plugin for generating assets manifest, especially for async chunks generated by code splitting, includes each of the code splitting point source file path info associate with the emitted chunk file.

## Install

```bash
npm install --save-dev webpack-assets-info-plugin
```

## Usage

In your webpack configration file:

```javascript
var AssetsInfoPlugin = require('webpack-assets-info-plugin');

module.exports = {
    // ...
    plugins: [
      new AssetsInfoPlugin()  // or new AssetsInfoPlugin({filename: 'my-assets.json'}) to specify the output json file name
    ]
};
```

This will generate a `assets.json` file in your root output directory with the information of each source file path to their corresponding output file, for example:

```json
{
    "publicPath": "/",
    "entryScripts": [
        "assets/manifest.923ac3.js",
        "assets/vendor.d95735.js",
        "assets/main.7b59b7.js"
    ],
    "entryStyles": [
        "assets/main.ea4d18.css"
    ],
    "asyncChunks": [
        {
            "id": 0,
            "size": 68773,
            "hash": "14d27ca8b1ac4a6f64ff",
            "src": "./src/pages/path1/page1/index.js",
            "file": "assets/chunk/0.14d27c.js"
        },
        {
            "id": 1,
            "size": 67988,
            "hash": "5434d160d747ed7bb0b0",
            "src": "./src/pages/path2/page2/index.js",
            "file": "assets/1.5434d1.js"
        }
    ],
    "assets": [
        {
            "src": "./src/img/path1/img1.png",
            "file": "assets/img1.23dc2c.png",
            "size": 7764
        },
        {
            "src": "./src/img/path2/img2.png",
            "file": "assets/img2.2f357c.png",
            "size": 6633
        }
    ]
}
```

So, you can see that each item in the `asyncChunks` array in this generated json file contains the source file path info(the `src` field) of the emitted code splitting point chunk file(the `file` field). And you can use this to add a script tag in your HTML page file to load the async js file inadvance, and reduce the waterfall time, so that your SPA's first screen page can load and render more quickly!

## License

MIT © [Jiayang Shen](https://github.com/JiayangShen)

---
_Source: https://npm.io/package/webpack-assets-info-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._