webpack HtmlWebpackPlugin插件

webpack的plugins(插件)是其的辅助功能，主要作用是解决其loader无法实现的事情，今天将详细介绍HtmlWebpackPlugin插件的功能
作用:

1. 生成项目的主入口html文件，一般原则是单应用的话会生成一个html文件，多应用的话会生成多个对应的html文件

2. 管理生成的html中引入js,css等资源配置，一般在多应用中会体现的比较突出一些

源码:

此处的配置项也是比较多的，以源码为例进行简单的介绍

constructor (options) {
    // Default options
    this.options = _.extend({
        template: path.join(__dirname, 'default_index.ejs'),
        filename: 'index.html',
        hash: false,
        inject: true,
        compile: true,
        favicon: false,
        minify: false,
        cache: true,
        showErrors: true,
        chunks: 'all',
        excludeChunks: [],
        chunksSortMode: 'auto',
        meta: {},
        title: 'Webpack App',
        xhtml: false
    }, options);
}

配置:

1. template: 本地模板的所在的文件路径，支持的加载器有html(常用)，ejs(默认)等，如上代码可以看到默认的是default_index.ejs文件

2. filename: 输出的文件名称，默认是index.html，注意: 这个文件的生成路径是相对于webpack中output.path而言的

例子: 若output.path为dist文件夹，则

filename: ‘index.html’ // dist文件夹->index.html文件

filename: ‘test/index.html’ // dist文件夹->test文件夹->index.html

3.hash: true/false, 默认是false, 是否每次为文件中引入的静态资源如js,css等路径后面加上唯一的hash值，如:

4.inject: 向template中注入静态资源的位置

true/body: js资源注入到body中

header: js资源注入到header中

false: css和js都不会注入

5.favicon: 添加特定的favicon路径输出到html中，需要在模板中单独配置-{%= o.htmlWebpackPlugin.options.favicon %}

6. title: template的title属性，需要在模板中单独配置-

7. chunks: 允许插入到模板中的chunk，如果不配置的话则会向entry中所有的打包出来的文件引入到模板中，这个一般在多应用中经常性使用到

// enrty配置
entry: {
        'app1': './src/app1/index.js',
        'app2': './src/app2/index.js'
 },
chunks: ['app1']  // 只会将app1的chunk注入
chunks: ['app2']  // 只会将app2的chunk注入
chunks: ['app1'， 'app2']  // 会将app1和app2的chunk注入

8. excludeChunks： 与chunks功能相反

9. chunksSortMode: no/auto/function, 默认为auto, 打包文件引入到模板的顺序模式

10. showErrors：false/ture, 默认为true, 是否将生成模板过程中的错误信息输入到模板上

11. xhtml: false/true,默认为false, 是否渲染link标签为自闭形式