From 84ec0eb44492c640f90a4f2e2cf67608fee4ecbb Mon Sep 17 00:00:00 2001 From: kimobrian Date: Mon, 3 Apr 2017 12:48:46 +0300 Subject: [PATCH] Add html-wenpack-plugin documentation --- README.md | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b945c7d..46348b6 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,7 @@ module.exports = { }, resolve: { // you can now require('file') instead of require('file.coffee') - extensions: ['', '.js', '.json', '.coffee'] + extensions: ['', '.js', '.json', '.coffee'] } }; ``` @@ -267,6 +267,41 @@ output: { } ``` +## 9. Automate HTML generation. + +`html-webpack-plugin` is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader. The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. Just add the plugin to your webpack config as follows. + +```javascript +var HtmlWebpackPlugin = require('html-webpack-plugin'); +var webpackConfig = { + entry: 'index.js', + output: { + path: 'dist', + filename: 'index_bundle.js' + }, + plugins: [new HtmlWebpackPlugin()] +}; +``` +This will generate a file dist/index.html containing the following: + +```html + + + + + Webpack App + + + + + +``` + +If you have multiple webpack entry points, they will all be included with script tags in the generated HTML. +If you have any CSS assets in webpack's output (for example, CSS extracted with the ExtractTextPlugin) then these will be included with tags in the HTML head. + + + ## Additional resources Take a look at a real world example on how a successful team is leveraging webpack: http://youtu.be/VkTCL6Nqm6Y