hwp-attributes-plugin

Plugin to add various attributes to script tags injected by html-webpack-plugin


Keywords
webpack, plugin, html-webpack-plugin, async, defer, module, nomodule, html-attributes, html-webpack-plugin-plugin, script-tag, webpack-plugin
License
MIT
Install
npm install hwp-attributes-plugin@2.1.1

Documentation

hwp-attributes-plugin

Build & Test CI CodeQL

Plugin to add various attributes to script tags injected by html-webpack-plugin

Installation

npm i -D hwp-attributes-plugin

Usage

import { HwpAttributesPlugin } from 'hwp-attributes-plugin';

// Webpack configuration object
export default {

    plugins: [
        new HtmlWebpackPlugin({ /* ... */ }),
        new HwpAttributesPlugin({
            module: ['**.mjs'],
            nomodule: ['polyfills.js'],
            async: ['some-async-script.js', 'another-async-script.js'],
            defer: ['script-to-defer.*.js'],
        }),
    ],
};

To configure the plugin, pass an object with the following keys to its constructor (all keys are optional):

  • module: patterns of scripts that should have the module attribute added;
  • nomodule: patterns of scripts that should have the nomodule attribute added;
  • async: patterns of scripts that should have the async attribute added;
  • defer: patterns of scripts that should have the defer attribute added.

The plugin performs pattern matching with the help of minimatch.

The module and nomodule attributes are mutually exclusive, module takes precedence. If the same file matches both module and nomodule patterns, it will have the module attribute.