# html-entry-plugin

> A webpack plugin that helps you deal with the entry htmls

Latest version **1.1.0** (published 2016-08-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install html-entry-plugin
pnpm add html-entry-plugin
yarn add html-entry-plugin
bun add html-entry-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.1.0 |
| Published | 2016-08-24 |
| First published | 2016-06-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Cowx Liu |
| Maintainers | xiaojimao18 |

## Links

- npm: https://www.npmjs.com/package/html-entry-plugin
- Repository: https://github.com/xiaojimao18/html-entry-plugin
- Issues: https://github.com/xiaojimao18/html-entry-plugin/issues
- npm.io page: https://npm.io/package/html-entry-plugin

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.13.1

## Recent versions

- 1.1.0 (latest) — 2016-08-24
- 1.0.8 — 2016-08-24
- 1.0.7 — 2016-07-12
- 1.0.6 — 2016-06-27
- 1.0.5 — 2016-06-27
- 1.0.4 — 2016-06-27
- 1.0.3 — 2016-06-27
- 1.0.2 — 2016-06-24
- 1.0.1 — 2016-06-24
- 1.0.0 — 2016-06-24

## README

html-entry-plugin
=================

Introduction
------------
[**html-entry-plugin**](https://github.com/xiaojimao18/html-entry-plugin) is a webpack plugin that complete the following two tasks.

  1. move the html files from *src* directory to *dist* directory.
  2. replace the references in htmls with the new path of js and css files generated by webpack.


Motivation
----------
When develop using webpack, sometimes web entries are htmls. Webpack can not deal with the htmls well.

We can use other tools like gulp, or we can use some plugins to generate html files. But that is not what I want.

I think the ideal solution should be:

  1. Simply use a plugin rather than write gulp scripts every time I construct a project.
  2. The content of htmls can be whatever I need, and the plugin just need to put them to the right place.
  3. Replace the references in htmls with the new path of hashed js and css files.


Installation
------------
`npm i html-entry-plugin`


Usage
-----
In *webpack.config.js*, use this plugin and set the path of the source code.

```javascript
plugin: [
  new HTMLEntryPlugin({
    src: 'path/to/src'
  }),
  ...
]
```

For the js and css files that are refered in html files, it only needs to write the reference between **[%** and **%]**.
The reference should be the entry name written in webpack config, and the ext name should be js or css.
```html
<link rel="stylesheet" href="[% entry.name.css %]">
<script src="[% entry.name.js %]"></script>
```


介绍
----
[**html-entry-plugin**](https://github.com/xiaojimao18/html-entry-plugin)是一个webpack插件，主要完成以下两个工作：

  1. 将html文件从*src*拷贝到*dist*
  2. 根据webpack生成的js和css文件，替换html中对应的引用


为什么要开发这个插件
--------------------
在使用webpack开发时，有时我们的入口时html文件。webpack并不能很好地帮助我们处理这些html文件。

我们可以使用gulp来辅助，还有一些plugin可以生成html文件，但是这些都不是我想要的。

我理想中解决方法应该是：

  1. 不需要每次建工程都要写一段gulp，只需要简单引用plugin就好
  2. 能不受限制的写html文件，plugin只需要帮我将html文件移动到对应的位置
  3. 能够自动根据webpack生成的带hash的js和css，修改html中的引用

简单地理解为：一个能帮我“编译”html并输出到指定的目录中的plugin。


安装
----
`npm i html-entry-plugin`


使用方法
--------
在*webpack.config.js*中，在plugin中添加该插件，并设置代码的路径

```javascript
plugin: [
  new HTMLEntryPlugin({
    src: 'path/to/src'
  }),
  ...
]
```

在html中，要引用生成的js或者css，只需要将引用的内容包裹在 **[%** 和 **%]** 中，
引用的内容填写该html对应的entry名称，后缀名对应填写js或者css。
```html
<link rel="stylesheet" href="[% entry.name.css %]">
<script src="[% entry.name.js %]"></script>
```

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