| 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
|