# html-inline-code-plugin

> html inline code plugin

Latest version **1.0.5** (published 2021-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install html-inline-code-plugin
pnpm add html-inline-code-plugin
yarn add html-inline-code-plugin
bun add html-inline-code-plugin
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-08-17 |
| First published | 2019-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex.h |
| Maintainers | ilex.h |
| Keywords | webpack, plugin |

## Links

- npm: https://www.npmjs.com/package/html-inline-code-plugin
- npm.io page: https://npm.io/package/html-inline-code-plugin

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2021-08-17
- 1.0.4 — 2021-03-05
- 1.0.3 — 2020-07-28
- 1.0.2 — 2019-06-10
- 1.0.1 — 2019-03-12
- 1.0.0 — 2019-03-11

## README

# HtmlInlineCodePlugin

使用该插件，可以给模板html插入指定code。

当然，更简单的方式是，直接在模板html中直接写入具体的code。

## Usage

```js
const HtmlInlineCodePlugin = require('html-inline-code-plugin');

plugins: [
  // with `html-webpack-plugin`
  new HtmlWebpackPlugin(),
  new HtmlInlineCodePlugin()
]

// or
// 参数为 js 代码
new HtmlInlineCodePlugin(`
  console.log('Inject body code!');
`)
// head 标签下插入inline style
new HtmlInlineCodePlugin({
  inject: 'head',
  tag: 'style',
  code: `.div{ background: red; }`
})

new HtmlInlineCodePlugin([
  { inject: 'head', tag: 'style', code: '' },
  { inject: 'body', tag: 'style', code: '' },
  { inject: 'head', tag: 'script', code: '' },
  { inject: 'body', tag: 'script', code: '' },
  { inject: 'body', tag: 'script', begin: false, code: '' }
])

// script src
new HtmlInlineCodePlugin([
  { inject: 'body', tag: 'script', attr: { src: 'brace/index.js' } }
])
```

## options

参数可为 `对象或者数组以及 code`, 对象结构如下：

| params | type | default | description |
| ------ | ------ | ------ | ------ |
| inject | string | body | 代码注入的位置，可选值为 `head` 和 `body` |
| tag | string | - | 注入代码的具体标签，可选值为 `style` 和 `script` |
| code | string | - | 具体的代码。当 `attr.src` 存在时，`code` 将不会被注入 |
| begin | boolean | true | 注入顺序，默认在最前面 |
| attr | Object | - | 内置属性，仅在 `script` 时起效，可用于配置 `src、type、async` 等 [更多](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script)  |

> 当参数为具体的 code 时，只支持注入 js code。

## example

webpack.config.js

```js
plugins: [
  ...
  new HtmlWebpackPlugin(),
  new InlineCodePlugin({
    begin: false,
    tag: 'script',
    inject: 'body',
    code: `
      var rrr = new MyDemo();
          rrr.init();
    `
  }),
  ...
]
```

tpl.html

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```

result: index.html

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
    <link href="/static/css/app.bad4bff9.css" rel="stylesheet">
  </head>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="/common.js"></script><script type="text/javascript" src="/app.e8b549110e71b9bad246.js"></script>
    <script type="text/javascript">
      var rrr = new MyDemo();
          rrr.init();
    </script>
  </body>
</html>
```

## changelog

* 2021-3-5 v1.0.4 modify `inline code plugin cb`

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