# html-webpack-inject-attributes-plugin

> add custom attributes to inject script and link

Latest version **1.0.6** (published 2021-03-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install html-webpack-inject-attributes-plugin
pnpm add html-webpack-inject-attributes-plugin
yarn add html-webpack-inject-attributes-plugin
bun add html-webpack-inject-attributes-plugin
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2021-03-09 |
| First published | 2018-01-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dyw934854565@sina.com |
| Maintainers | dyw934854565 |
| Keywords | html-webpack-plugin, inject, attributes, webpack |

## Links

- npm: https://www.npmjs.com/package/html-webpack-inject-attributes-plugin
- Repository: https://github.com/dyw934854565/html-webpack-inject-attributes-plugin
- Homepage: https://github.com/dyw934854565/html-webpack-inject-attributes-plugin#readme
- Issues: https://github.com/dyw934854565/html-webpack-inject-attributes-plugin/issues
- npm.io page: https://npm.io/package/html-webpack-inject-attributes-plugin

## Dependencies (3)

- [safe-require](https://npm.io/package/safe-require.md) ^1.0.3
- [lodash.assign](https://npm.io/package/lodash.assign.md) ^4.2.0
- [lodash.foreach](https://npm.io/package/lodash.foreach.md) ^4.5.0

## Recent versions

- 1.0.6 (latest) — 2021-03-09
- 1.0.5 — 2020-10-12
- 1.0.4 — 2020-10-12
- 1.0.3 — 2020-03-17
- 1.0.2 — 2020-01-14
- 1.0.1 — 2018-06-09
- 1.0.0 — 2018-01-28

## README

html-webpack-inject-attributes-plugin
=======================

[![NPM Version][npm-image]][npm-url]
[![Dependency Status][david-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Download Status][dt-image]][npm-url]
[![MIT License][license-image]][license-url]


add custom attributes to inject tags

# install

```javascript
npm install html-webpack-inject-attributes-plugin -D
```

# use

 > please use it after `html-webpack-plugin`, especially in webpack2+.

## add to all inject tags, effective in all html

```javascript
    plugins = [
        new HtmlWebpackPlugin(),
        new htmlWebpackInjectAttributesPlugin({
            inject: "true",
            async: true,
            test: {}
        })  // Object, key should be string, value can be string or function、object, object will stringify
    ]
```
you got

```html
    <script type="text/javascript" src="index.js" inject="true" async test="{}"></script>
```

## add to chunks in HtmlWebpackPlugin by add attributes to HtmlWebpackPlugin，only effective in the current html

```javascript
    plugins = [
        new HtmlWebpackPlugin({
            attributes: {
                'data-src': function (tag) { return tag.attributes.src }
            },
        }),
        new htmlWebpackInjectAttributesPlugin()
    ]
    /**
     *  if value is a function, got three arguments。
     *  1、tag, ast of tag node
     *  2、compilation, you can get webpack build hash by compilation.hash
     *  3、index, index of trunks
    **/
```

you got

```html
    <script type="text/javascript" src="index.js" data-src="index.js" inject="true"></script>
```

## return false to prevent some tags add attributes

```javascript
    plugins = [
        new HtmlWebpackPlugin({
            inject: true,
            hash: true,
            chunks: ['index'],
            attributes: {
                'data-src': function (tag, compilation, index) {
                    if (tag.tagName === 'script') {
                        return true;
                    }
                    return false;
                }
            },
        }),
        new htmlWebpackInjectAttributesPlugin()
    ]
```

style tags do not be affected

## use chainWebpack

```javascript
// vue.config.js
const htmlInject = require('html-webpack-inject-attributes-plugin')
module.exports = {
  chainWebpack: (config) => {
    config.plugin('html')
      .tap(args => {
        args[0].attributes = {
          async: true,
          inject: 'true'
        }
        return args
      })

    config.plugin('html-inject')
      .after('html')
      .use(htmlInject, [{
          common: 'true'
      }])
  },
}

```


### LICENSE

[MIT License][license-url]


[npm-url]: https://npmjs.org/package/html-webpack-inject-attributes-plugin
[npm-image]: https://badge.fury.io/js/html-webpack-inject-attributes-plugin.png
[david-image]: https://david-dm.org/leftstick/html-webpack-inject-attributes-plugin.png
[dt-image]: https://img.shields.io/npm/dt/html-webpack-inject-attributes-plugin.svg
[travis-image]: https://travis-ci.com/dyw934854565/html-webpack-inject-attributes-plugin.svg?branch=master
[travis-url]: https://travis-ci.com/dyw934854565/html-webpack-inject-attributes-plugin
[license-image]: https://img.shields.io/npm/l/html-webpack-inject-attributes-plugin.svg
[license-url]: https://raw.githubusercontent.com/dyw934854565/html-webpack-inject-attributes-plugin/master/LICENSE

---
_Source: https://npm.io/package/html-webpack-inject-attributes-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._