Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sjinks/hwp-attributes-plugin
Plugin to add various attributes to script tags injected by html-webpack-plugin
https://github.com/sjinks/hwp-attributes-plugin
html-attributes html-webpack-plugin html-webpack-plugin-plugin script-tag webpack-plugin
Last synced: 2 months ago
JSON representation
Plugin to add various attributes to script tags injected by html-webpack-plugin
- Host: GitHub
- URL: https://github.com/sjinks/hwp-attributes-plugin
- Owner: sjinks
- License: mit
- Created: 2020-05-31T21:49:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T00:19:49.000Z (3 months ago)
- Last Synced: 2024-10-29T20:53:13.625Z (3 months ago)
- Topics: html-attributes, html-webpack-plugin, html-webpack-plugin-plugin, script-tag, webpack-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/hwp-attributes-plugin
- Size: 2.81 MB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hwp-attributes-plugin
[![Build and Test](https://github.com/sjinks/hwp-attributes-plugin/actions/workflows/build.yml/badge.svg)](https://github.com/sjinks/hwp-attributes-plugin/actions/workflows/build.yml)
[![CodeQL](https://github.com/sjinks/hwp-attributes-plugin/actions/workflows/codeql.yml/badge.svg)](https://github.com/sjinks/hwp-attributes-plugin/actions/workflows/codeql.yml)Plugin to add various attributes to script tags injected by [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)
## Installation
```shell
npm i -D hwp-attributes-plugin
```## Usage
```js
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](https://www.npmjs.com/package/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.