# html-webpack-alter-plugin

> A plugin can alter the template when using html-webpack-plugin

Latest version **0.0.5** (published 2020-07-20) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2020-07-20 |
| First published | 2020-07-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | lizhongwei157@163.com |
| Maintainers | howaboutryze |
| Keywords | html-webpack-plugin, alter |

## Links

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

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2020-07-20
- 0.0.4 — 2020-07-19
- 0.0.3 — 2020-07-19
- 0.0.2 — 2020-07-19
- 0.0.1 — 2020-07-17

## README

# html-webpack-alter-plugin

A plugin can alter the template when using html-webpack-plugin.

## Installation

```bash
 npm i --save-dev html-webpack-alter-plugin
```

## Usage

```js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackAlterPlugin = require('html-webpack-alter-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackAlterPlugin({
      position: 'head',
      content: [
        {
          type: 'script',
          data: 'window.__MY_GLOBAL__={ name: "xiao ming", age: 18 };',
        },
        {
          type: 'style',
          data: '.red-text { color: red; }',
        }
      ]
    }),
  ],
};
```

`npm run build` and you will get the html file like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
    <script type="text/javascript">window.__MY_GLOBAL__={name:"xiao ming",age:18}</script><style>.red-text{color:red}</style>
  </head>
  </head>
  <body>
  </body>
</html>
```

## Options

| option | type | value |
| ---- | ---- | --- |
| position | string | 'head'/'body' |
| content | array | { type: 'script'/'style', data } |

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