1 | <div align="center">
|
2 | <a href="https://github.com/webpack/webpack">
|
3 | <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
|
4 | </a>
|
5 | </div>
|
6 |
|
7 | [![npm][npm]][npm-url]
|
8 | [![node][node]][node-url]
|
9 | [![chat][chat]][chat-url]
|
10 | [![size][size]][size-url]
|
11 |
|
12 | # html5-entry-webpack-plugin
|
13 |
|
14 | The `html5-entry-webpack-plugin` allows using an HTML file as an entry module. It looks for resources in the file and includes them properly.
|
15 |
|
16 | ## Getting Started
|
17 |
|
18 | To begin, you'll need to install `html5-entry-webpack-plugin`:
|
19 |
|
20 | ```sh
|
21 | npm install html5-entry-webpack-plugin --save-dev
|
22 | ```
|
23 |
|
24 | Use an HTML file with all the necessary references:
|
25 |
|
26 | **index.html**
|
27 |
|
28 | ```html
|
29 | <!DOCTYPE html>
|
30 | <html lang="en">
|
31 | <head>
|
32 | <meta charset="UTF-8">
|
33 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
34 | <title>My App</title>
|
35 | <link rel="stylesheet" href="./style.scss">
|
36 | </head>
|
37 | <body>
|
38 | <div id="app"></div>
|
39 | <script src="./index.tsx"></script>
|
40 | </body>
|
41 | </html>
|
42 | ```
|
43 |
|
44 | The references to the files `index.tsx` and `style.scss` will be resolved, handled, and replaced with their outputs.
|
45 |
|
46 | Then add the plugin to your `webpack` config. For example:
|
47 |
|
48 | **webpack.config.js**
|
49 |
|
50 | ```js
|
51 | const { resolve } = require('path');
|
52 | const { Html5EntryWebpackPlugin } = require('html5-entry-webpack-plugin');
|
53 |
|
54 | module.exports = {
|
55 | entry: {
|
56 | main: resolve(__dirname, 'src/index.html'),
|
57 | },
|
58 | plugins: [new Html5EntryWebpackPlugin()],
|
59 | };
|
60 | ```
|
61 |
|
62 | And run `webpack` via your preferred method. This will emit `index.html` as a file along the other files, script and style bundles.
|
63 |
|
64 | ## Options
|
65 |
|
66 | (No options yet.)
|
67 |
|
68 | ## Contributing
|
69 |
|
70 | Contributions in any form are appreciated and much welcome!
|
71 |
|
72 | Just make sure to post an issue or reach out to me on [Gitter](https://gitter.im/piral-io/community) before starting actual work on anything. It really helps to avoid problems.
|
73 |
|
74 | ## License
|
75 |
|
76 | This plugin is released using the MIT license.
|
77 |
|
78 | [npm]: https://img.shields.io/npm/v/html5-entry-webpack-plugin.svg
|
79 | [npm-url]: https://npmjs.com/package/html5-entry-webpack-plugin
|
80 | [node]: https://img.shields.io/node/v/html5-entry-webpack-plugin.svg
|
81 | [node-url]: https://nodejs.org
|
82 | [chat]: https://img.shields.io/badge/gitter-piral.io%2Fcommunity-brightgreen.svg
|
83 | [chat-url]: https://gitter.im/piral-io/community
|
84 | [size]: https://packagephobia.now.sh/badge?p=html5-entry-webpack-plugin
|
85 | [size-url]: https://packagephobia.now.sh/result?p=html5-entry-webpack-plugin
|