# @ethikz/inject-html-webpack-plugin
> inject assets into html when webpack compiles
Latest version **1.0.4** (published 2019-11-25) · MIT license · 0 weekly downloads
## Install
```sh
npm install @ethikz/inject-html-webpack-plugin
pnpm add @ethikz/inject-html-webpack-plugin
yarn add @ethikz/inject-html-webpack-plugin
bun add @ethikz/inject-html-webpack-plugin
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; large bundle.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-11-25 |
| First published | 2018-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 67.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Josh Christensen |
| Maintainers | ethikz |
| Keywords | html, webpack |
## Links
- npm: https://www.npmjs.com/package/@ethikz/inject-html-webpack-plugin
- Repository: https://github.com/ethikz/inject-html-webpack-plugin
- Issues: https://github.com/ethikz/inject-html-webpack-plugin/issues
- npm.io page: https://npm.io/package/@ethikz/inject-html-webpack-plugin
## Dependencies (2)
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [fs-extra](https://npm.io/package/fs-extra.md) ^7.0.1
## 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
- 1.0.4 (latest) — 2019-11-25
- 1.0.3 — 2018-12-10
- 1.0.1 — 2018-12-04
- 1.0.0 — 2018-12-04
## README
inject-html-webpack-plugin [](https://travis-ci.org/ethikz/inject-html-webpack-plugin) [](https://badge.fury.io/js/%40ethikz%2Finject-html-webpack-plugin)
===
[](https://nodei.co/npm/@ethikz/inject-html-webpack-plugin/)
Inspired by [inject-html-webpack-plugin](https://github.com/ali322/inject-html-webpack-plugin), this is a simple and efficient webpack plugin that injects script and style tags into your HTML.
Install
===
```javascript
npm install '@ethikz/inject-html-webpack-plugin' --save--dev
```
Usage
===
add the plugin in your webpack config
```javascript
import InjectHtmlPlugin from '@ethikz/inject-html-webpack-plugin';
module.exports = {
entry: {
main: './index.js'
},
module: {
loaders: [
...
]
},
output: {
path: './dist',
filename: '[name].min.js'
},
plugins: [
new InjectHtmlPlugin({
filename: './index.html',
chunks:[
'index'
],
transducer: 'http://cdn.example.com',
custom: [{
start: '',
end: '',
content: Date.now()
}]
})
]
};
```
then add below placeholders into HTML file
```html
Document
```
Plugin Options
===
- **transducer**: apply transducer to injected file's URL, accept prepended string or function that receives a file path as an argument and returns URL string as a result
- **filename**: HTML file path or array of paths to be injected
+ if injecting into a single file, just pass it as a string
```
filename: './index.html'
```
+ if you want the plugin to inject into multiple files you can pass it an array
```
filename: [
'./file.html',
'./file1.html',
'./file2.html',
'./file3.html'
]
// or you can define a constant as an array and pass it in
filename: arrayConst
```
- **chunks**: injected array of chunks
- **startJS**: start identifier where to inject script tag, *( eg: `` )*
- **endJS**: end identifier where to inject script tag, *( eg: `` )*
- **startCSS**: start identifier where to inject style tag, *( eg: `` )*
- **endCSS**: end identifier where to inject style tag, *( eg: `` )*
- **custom**: array of custom inject, like bundle time, accept objects contains below key/values,
+ start: inject start identifier
+ end: inject end identifier
+ content: injected content
## License
[MIT License](http://en.wikipedia.org/wiki/MIT_License)
---
_Source: https://npm.io/package/@ethikz/inject-html-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._