实用 - HtmlWebpackPlugin

作用：自动生成html文件，并引入所有打包后的bundle.js 和 css文件
在上面的代码中我们都是手动创建html文件并引入打包后的js文件，这样不够自动化如果生成bundle引入了hash值，那么每次打包之后的js文件名也要重新替换，所以我们需要一个自动生成并引入打包后js的插件。

1）首先，安装

npm install —save-dev html-webpack-plugin

2）在webpack.config.js 中配置

在entry入口文件为对象时我们引入了三个入口文件并在output中打包了三个bundle文件，在三个页面分别引入这三个文件

以index.html为模版再创建list.html和detail.html 不用引入bundle文件，会根据配置文件在打包后自动引入。

3）打包后的文件目录

补充 - HtmlWebpackPlugin的配置项

{
    plugins: [
        new htmlWebpackPlugin({
            template: '模板所在目录',
            title: '生成的HTML文档的标题',
            filename: '输出的html文件名',
            inject: 'true |'head'|'body'|false将assets注入template或templateContent', 
            favicon: '将给定的图标路径添加到输出html',
            minify: '{...} | false传递html-minifier选项对象来缩小输出',
            hash: 'true | false如果true然后在所有包含的脚本和CSS文件中附加一个唯一的webpack编译哈希。这对于缓存清除非常有用',
            cache: 'true | falseif true（默认）只有在更改文件时才尝试发出文件。',
            showErrors: 'true | false如果true（默认）错误的详细信息将被写入HTML页面',
            chunks: '允许添加的chunk',
            chunksSortMode: '允许控制如何将批处理包含在html之前进行排序。允许的值：'none'| 'auto'| '依赖'| {function} - 默认值：'auto'',
            excludeChunks: '允许您跳过一些chunk',
            xhtml："true | false如果true将link标签渲染为自动关闭，则符合XHTML。默认是false"
        })
    ]
}

template配置项

有的时候，我们希望输出到dist文件夹下的html文件是具有某种特殊格式的（比如vue中的index.html中就有