@chipzhang/webpack-asset-attributes-plugin weekly downloads statistics

Add custom attributes to the asset tags in the generated HTML by html-webpack-plugin

Overview

This is a webpack plugin, that adds custom attributes (i.e. onload) to the JS / CSS asset tags generated by html-webpack-plugin. This plugin only handles statically loaded assets, rather than lazy loaded assets (i.e. via import('file') syntax). Supports webpack v4 + html-webpack-plugin v4, or webpack v5 + html-webpack-plugin v5. This package has built-in TypesScript support.

Install

npm i @chipzhang/webpack-asset-attributes-plugin

Note this will not install webpack or html-webpack-plugin automatically.

Options

scriptAttribs

A key-value object representing the custom attributes to add to the JS asset tags. Values can be string or boolean, and will be automatically escaped. For example:

{onload: 'console.log("JS Asset loaded", this)', defer: true}

styleAttribs

A key-value object representing the custom attributes to add to the CSS asset tags. Values can be string or boolean, and will be automatically escaped. For example:

{onload: 'console.log("CSS Asset loaded", this)', disabled: true}

Example Usage

const HTMLPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {AssetAttributesPlugin} = require('@chipzhang/webpack-asset-attributes-plugin')

const assetAttributesPlugin = new AssetAttributesPlugin({
  scriptAttribs: {onload: 'console.log("JS Asset loaded", this)', defer: true},
  styleAttribs: {onload: 'console.log("CSS Asset loaded", this)', disabled: true},
})

module.exports = {
  /* your webpack configs */
  plugins: [new HTMLPlugin(), new MiniCssExtractPlugin(), assetAttributesPlugin],
  module: {
    rules: [
      /* loaders for other file extensions */
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
}

In your webpack config file, first add plugin html-webpack-plugin, to generate the HTML file. Then configure this plugin (@chipzhang/webpack-asset-attributes-plugin), to add custom attributes to the JS / CSS asset tags. You may need mini-css-extract-plugin to generate separate CSS files instead of inlining styles in JS files.

For the above example, the generated HTML may look like:

<html>
  <head>
    <!-- other head tags -->
    <script defer src="example.js" onload='console.log("JS Asset loaded", this)'></script>
    <link href="example.css" rel="stylesheet" onload='console.log("CSS Asset loaded", this)' disabled />
  </head>
  <body>
    <!-- body tags -->
  </body>
</html>

License

GNU AFFERO GENERAL PUBLIC LICENSE Version 3