Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/panghu-huang/html-attribute-webpack-plugin
Add custom attributes to HTML tags
https://github.com/panghu-huang/html-attribute-webpack-plugin
Last synced: about 1 month ago
JSON representation
Add custom attributes to HTML tags
- Host: GitHub
- URL: https://github.com/panghu-huang/html-attribute-webpack-plugin
- Owner: panghu-huang
- Created: 2020-08-01T07:07:53.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T20:40:46.000Z (almost 2 years ago)
- Last Synced: 2024-11-05T02:05:52.343Z (about 2 months ago)
- Language: TypeScript
- Size: 562 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTMLAttributeWebpackPlugin
A Webpack plugin for add custom attributes to HTML tags
## Example
[webpack.config.ts](./example/webpack.config.ts)
## Usage
* Use CommonJs
```javascript
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { HTMLAttributeWebpackPlugin } = require('html-attribute-webpack-plugin')
const config = {
// ...
plugins: [
new HTMLWebpackPlugin({
template: 'path/to/your/template'
}),
new HTMLAttributeWebpackPlugin(
HTMLWebpackPlugin,
{
// getAttributes is a function that return updated attributes
getAttributes: tag => {
return {
...tag.attributes,
name: tag.tagName
}
},
// You can provide an object or a function that return an object
script: {
crossorigin: 'anonymous'
},
// Same as script
style: tag => {
return {
...tag.attributes
}
}
}
)
]
}
```
* Use TypeScript
```typescript
import webpack from 'webpack';
import HTMLWebpackPlugin from 'html-webpack-plugin';
import { HTMLAttributeWebpackPlugin, HtmlTagObject } from 'html-attribute-webpack-plugin';
const config: webpack.Configuration = {
// ...
plugins: [
new HTMLWebpackPlugin({
template: 'path/to/your/template'
}),
new HTMLAttributeWebpackPlugin(
HTMLWebpackPlugin,
{
getAttributes: (tag: HtmlTagObject) => {
return {
...tag.attributes,
name: tag.tagName
}
},
script: {
crossorigin: 'anonymous'
},
style: (tag: HtmlTagObject) => {
return {
...tag.attributes
}
}
}
)
]
}
```