npm

Inject Assets List Webpack Plugin

Inject assets list into your HTML template

Install

This Plugin dependent on HtmlWebpackPlugin

  npm i --save-dev inject-assets-list-webpack-plugin

  yarn add --dev inject-assets-list-webpack-plugin

Usage

The plugin will generate an JS array for you that includes all your webpack
assets(RawSource) in the <head> using <script> tags. Just add the plugin to your webpack
config as follows:

webpack.config.js

// !! HtmlWebpackPlugin required
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InjectAssetsListWebpackPlugin = require('inject-assets-list-webpack-plugin');
module.exports = {
  entry: 'index.js',
  publicPath: '/',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin(), new InjectAssetsListWebpackPlugin()],
};

This will generate a file dist/index.html containing the following

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Webpack App</title>
    <script type="text/javascript">
      var __assets = [
        '/img/apple.707709ec.png',
        '/img/banana.51a48343.png',
        /* Webpack assets */
      ];
    </script>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

Assets list value format: <publicPath>name.ext (eg. /img/banana.51a48343.png)

Options

You can pass a hash of configuration options to inject-assets-list-webpack-plugin.
Allowed values are as follows:

Name	Type	Default	Description
`name`	`{String}`	`__assets`	The name to use for the global variable
`allowPattern`	`{RegExp}`	undefined	Regular expression for allow assets name
`ignorePattern`	`{RegExp}`	undefined	Regular expression for ignoring assets

Here’s an example webpack config illustrating how to use these options

webpack.config.js

module.exports = {
  entry: 'index.js',
  publicPath: '/',
  output: {
    path: __dirname + '/dist',
    filename: 'index.js',
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new InjectAssetsListWebpackPlugin({
      name: 'myAssets',
      allowPattern: /(png|jpg)/, // Allow `png`, `jpg`
      ignorePattern: /(gif|ttf)/, // ignoring `gif`, `ttf` files
    }),
  ],
};

Sample assets

assets
  ├─ img
  │   ├── apple.png
  │   ├── animation.gif
  │   └── banana.png
  │
  ├─ font
  │   └── my-font.ttf
  │
  └─ content
      ├── post_1.jpg
      ├── post_2.jpg
      └── post_3.jpg

Result

// in <script>
var myAssets = [
  '/img/apple.707709ec.png',
  '/img/banana.51a48343.png',
  '/content/post_1.6b60786f.jpg',
  '/content/post_2.26053162.jpg',
  '/content/post_3.a416371c.jpg',
];

You can uses assets list list like this.

function preload() {
  Promise.allSettled(myAssets.map((uri) => fetch(uri))).then(() => {
    console.log(`${myAssets.length} resource(s) loaded.`);
  });
}
preload(); // 5 resource(s) loaded.

Development

# Install dependencies
npm i
# Build module
npm run build

Changelog

1.0.3 (2020.11.09)
- Remove RawSource filtering logic
1.0.2 (2020.11.09)
- FIXED: Combine default options at initialization
- Update README.md
1.0.1 (2020.11.09)
- Add allowPattern option
- Change name property to optional
1.0.0 (2020.11.09)
- First Release!

Contributors

This project exists thanks to all the people who contribute.

You’re free to contribute to this project by submitting issues and/or pull requests.