webpack 插件： html-webpack-plugin
转载自：
http://www.cnblogs.com/haogj/p/5160821.html
这个插件用来简化创建服务于 webpack bundle 的HTML文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模版加载生成的 bundles， 或者自己加载这些 bundles
installation
使用npm安装这个插件
$ npm install html-webpack-plugin@2 --save-devBasic Usage
这个插件可以帮助生成HTML文件，在body元素中，使用 script 来包含你的所有 webpack bundles，只需要在你的 webpack 配置文件中如下配置：
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index.bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}这将会自动在 dist 目录中生成一个名为 index.html 的文件，内容如下：
<html>
<head>
<meta charset='UTF-8'>
<title>Webpack Apptitle>
head>
<body>
<script src="index.bundle.js">script>
body>
html>如果你有多个 webpack 入口点，它们都会被包含在生成的 script 元素中。
如果有任何的 css 资源包含在 webpack 输出中（例如，使用 ExtractTextPlugin 提炼出的css），这些将会使用 link 包含在 HTML 页面的 head 元素中。
configuration
可以进行一系列的配置，支持如下的配置信息：
title： 用来生成页面的 title 元素
filename： 输出的HTML文件名，默认是index.html，也可以直接配置带有子目录。
template： 模版文件路径，支持加载器，比如 html!./index.html
inject： true | ‘head’ | ‘body’ | false ，注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的js资源将被放置到body元素的底部。
favicon： 添加特定的 favicon 路径到输出的HTML 文件中。
minify： {} | false ， 传递 html-minifier 选项给 minify 输出
hash： true | false，如果为ture，将添加一个唯一的webpack编译hash到所有包含的脚本和css文件，对于解除 cache 很有用。
cache： true | false，如果为true，这是默认值，仅仅在文件修改之后才会发布文件。
showErrors： true | false，如果为true，这是默认值，错误信息会写入到 HTML 页面中
chunks： 允许只添加某些块（比如，仅仅unit test 块）
chunksSortMode： 允许控制块在添加到页面之前的排序方式，支持的值：’none’ | ‘default’ | {function}-default:’auto’
excludeChunks： 允许跳过某些块，（比如，跳过单元测试的块）
下面的示例演示了如何使用这些配置
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js',
hash: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
]
}生成多个 HTML 文件
通过在配置文件中添加多次这个插件，来生成多个 html 文件。
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
}编写自定义模版
如果默认生成的HTML文件不适合你的需要，可以创建自定义的模版。方便的方式是通过 inject 选项，然后传递给定制的HTML文件。html-webpack-plugin将会自动注入所有需要的 css，js，manifest和favicon文件到标记中
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'my-index.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
})
]my-index.html文件：
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %>title>
head>
<body>
body>
html>如果你有模版加载器，可以使用它来解析这个模版。
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'my-index.hbs',
inject: 'body'
})
]另外，如果你的模版是一个字符串，可以使用templateContent传递它。
plugins: [
new HtmlWebpackPlugin({
inject: true,
templateContent: templateContentString
})
]如果inject特性不适合你的需要，你希望完全控制资源放置。可以直接使用 lodash 语法，使用 default template 作为起点创建自己的模版。
templateContent 选项也可以是一个函数，以便使用其他语言，比如 jade：
plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation) {
// Return your template content synchronously here
return '..';
}
})
]