用npm安装这个插件

 

　　该插件将为您生成一个HTML5文件，这个文件用script标签引用所有的webpack包。只需将插件添加到您的webpack配置，如下：

 

　　这样就会生成一个文件 dist/index.html，如下：

 

　　如果您有多个webpack入口点，他们都将包括在生成的HTML文件script标签中。

 

　　如果你有用webpack产出css文件（例如用ExtractTextPlugin提取的css文件），那么html-webpack-plugin会在html的head中插件link标签引入这些css文件。

 

　　你可以传一个配置选项的 散列到 HtmlWebpackPlugin，允许的值如下：

 

　　title : 用于生成的HTML文件的标题。

 

　　filename : 用于生成的HTML文件的名称，默认是index.html。你可以在这里指定子目录（例如：assets/admin.html）

 

　　template : 模板的路径。支持加载器，例如 html!

 

　　inject :true | ‘head’ | ‘body’ | false  。把所有产出文件注入到给定的 template 或templateContent。当传入 true或者 ‘body’时所有javascript资源将被放置在body元素的底部，“head”则会放在head元素内。

 

　　favicon : 给定的图标路径，可将其添加到输出html中。

 

　　minify : {…} | false 。传一个html-minifier 配置object来压缩输出。

 

　　hash : true | false。如果是true，会给所有包含的script和css添加一个唯一的webpack编译hash值。这对于缓存清除非常有用。

 

　　cache : true | false 。如果传入true（默认），只有在文件变化时才 发送（emit）文件。

 

　　showErrors : true | false 。如果传入true（默认），错误信息将写入html页面。

 

　　chunks : 只允许你添加chunks 。（例如：只有单元测试块 ）

 

　　chunksSortMode : 在chunk被插入到html之前，你可以控制它们的排序。允许的值 ‘none’ | ‘auto’ | ‘dependency’ | {function}  默认为‘auto’。

 

　　excludeChunks : 允许你跳过一些chunks（例如，不要单元测试的 chunk）。

 

　　xhtml : 用于生成的HTML文件的标题。

 

　　title : true | false。如果是true，把link标签渲染为自闭合标签，XHTML要这么干的。默认false。

 

　　下面是一个示例webpack配置说明如何使用这些选项：

 

　　生成多个html文件，多次声明这个插件在plugins 数组中。如下：

 

　　如果默认生成的HTML不能满足你的需求，你可以自己写模板。最简单的方法是使用插入选项，并传入一个自定义的html文件。html-webpack-plugin将自动注入所需的css, js, manifest 和 favicon 到标签中。

 

　　my-index.ejs:

 

　　如果你已经有模板的loader，你可以用它来解析模板。请注意，如果您指定html-loader 并且用了 .html文件作为模板，它也会发生。

 

　　你可以用开开箱即用的lodash语法。如果inject 性能还不能满足你的需求，而且你想完全控制资源放到哪里，你可以用html-webpack-template project的默认模板 模板作为启动点。

 

　　下列这些变量可以用在模板中：

 

　　htmlWebpackPlugin:这个插件的特定数据

 

　　htmlWebpackPlugin.files 它包含一个从入口点名称映射到包的文件名

 

　　如果你在webpack 配置文件中设置了publicPath。htmlWebpackPlugin.files将会正确映射到 资源散列。

 

　　htmlWebpackPlugin.options：传给插件的 配置项。除了插件本身使用这个些配置项以外，你也可以在模板中使用这些配置项。

 

　　webpack：webpack的统计对象。注意：这是stats对象，因为它是在HTML模板时发出，因此wepback运行完成后可能没有完整的数据集可用。

 

　　webpackConfig：插件编译用的webpack 配置项。例如它可以用来获取publicPath （webpackConfig.output.publicPath）。

 

　　只包括某些你模块（chunk），你可以限制这些模块的使用。

 

　　通过设置excludeChunks选项还可以排除某些块：

 

　　允许其它插件篡改这个插件执行的以下方法：

 

　　1. html-webpack-plugin-before-html-generation

 

　　2. html-webpack-plugin-before-html-processing

 

　　3. html-webpack-plugin-after-html-processing

 

　　4. html-webpack-plugin-after-emit

 

　　例如用html-webpack-harddisk-plugin

 

　　用法：

 

　　然后在webpack.config.js中这样写：

 

　　注意：这个回调函数必须传htmlPluginData ,这是为了把它传给其它也监听“html-webpack-plugin-before-html-processing”这个同一事件的插件。