|
| 1 | +--- |
| 2 | +title: html-webpack-plugin |
| 3 | +contributors: |
| 4 | + - ampedandwired |
| 5 | + - simon04 |
| 6 | +--- |
| 7 | + |
| 8 | +The [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) simplifies creation of HTML files to serve your |
| 9 | +webpack bundles. This is especially useful for webpack bundles that include |
| 10 | +a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply |
| 11 | +your own template using [lodash templates](https://lodash.com/docs#template), or use your own [loader](/loaders). |
| 12 | + |
| 13 | +## Installation |
| 14 | +``` |
| 15 | +$ npm install html-webpack-plugin --save-dev |
| 16 | +``` |
| 17 | + |
| 18 | +## Basic Usage |
| 19 | + |
| 20 | +The plugin will generate an HTML5 file for you that includes all your webpack |
| 21 | +bundles in the body using `script` tags. Just add the plugin to your webpack |
| 22 | +config as follows: |
| 23 | + |
| 24 | +```javascript |
| 25 | +var HtmlWebpackPlugin = require('html-webpack-plugin'); |
| 26 | +var webpackConfig = { |
| 27 | + entry: 'index.js', |
| 28 | + output: { |
| 29 | + path: 'dist', |
| 30 | + filename: 'index_bundle.js' |
| 31 | + }, |
| 32 | + plugins: [new HtmlWebpackPlugin()] |
| 33 | +}; |
| 34 | +``` |
| 35 | + |
| 36 | +This will generate a file `dist/index.html` containing the following: |
| 37 | +```html |
| 38 | +<!DOCTYPE html> |
| 39 | +<html> |
| 40 | + <head> |
| 41 | + <meta charset="UTF-8"> |
| 42 | + <title>Webpack App</title> |
| 43 | + </head> |
| 44 | + <body> |
| 45 | + <script src="index_bundle.js"></script> |
| 46 | + </body> |
| 47 | +</html> |
| 48 | +``` |
| 49 | + |
| 50 | +If you have multiple webpack entry points, they will all be included with `script` |
| 51 | +tags in the generated HTML. |
| 52 | + |
| 53 | +If you have any CSS assets in webpack's output (for example, CSS extracted |
| 54 | +with the [ExtractTextPlugin](/plugins/extract-text-webpack-plugin)) |
| 55 | +then these will be included with `<link>` tags in the HTML head. |
| 56 | + |
| 57 | +## Configuration |
| 58 | + |
| 59 | +For all configuration options, please see the |
| 60 | +[plugin documentation](https://github.com/ampedandwired/html-webpack-plugin#configuration). |
| 61 | + |
| 62 | + |
| 63 | +## Third party addons |
| 64 | + |
| 65 | +The plugin supports addons. For a list see the |
| 66 | +[documentation](https://github.com/ampedandwired/html-webpack-plugin#third-party-addons). |
0 commit comments