作用主要有2个:
    1.注入打包生成的bundle文件。This 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.
    2.生成或配置.html文件。let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.

    主要配置参数:

    属性 描述(Description 默认值(Default)
    title 生成的HTML模板的title(The title to use for the generated HTML document) Webpack App
    若与模版的冲突,以模版的为准
    filename 生成的模板文件的名字 ‘index.html’
    若与模版的冲突,以模版的为准
    template 根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板,可以是 html, jade, ejs, hbs, 等等,但是要注意的是,使用自定义的模板文件时,需要提前安装对应的 loader, 否则webpack不能正确解析。
    如果你设置的 title 和 filename于模板中发生了冲突,那么以你的title 和 filename 的配置值为准。
    webpack relative or absolute path to the template. By default it will use src/index.ejs if it exists.
    ``
    inject 生成bundle在模版中等注入位置
    Inject all assets into the given template or templateContent
    true/false/body/head
    true:默认值,script标签位于html文件的body底部
    body:script标签位于html文件的body底部
    head:script标签位于html文件的head中
    false:不插入生成的js文件
    favicon 给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名 ‘’
    minify 对生成的html文件进行压缩。
    html-webpack-plugin内部集成了html-minifier,因此,还可以对minify进行配置,详见:
    https://www.npmjs.com/package/html-webpack-plugin#minification

    https://www.jianshu.com/p/08a60756ffda
    true if mode is 'production', otherwise false 。开发模式默认值为false, 不对生成的 html 文件进行压缩。
    hash If true then append a unique webpack compilation hash to all included scripts and CSS files. This is useful for cache busting
    bundle.js 文件后跟的一串 hash 值就是此次 webpack 编译对应的 hash 值
    image.png
    false
    cache 表示内容变化的时候生成一个新的文件 true
    showErrors 是否将错误信息写在页面里。如果 webpack 编译出现错误,webpack会将错误信息包裹在一个 pre 标签内。方便定位错误 true
    chunks chunks主要用于多入口文件,当你有多个入口文件,那就回编译后生成多个打包后的文件,那么chunks 就能选择你要使用那些js文件.
    Allows you to add only some chunks 。
    excludeChunks 排除掉一些js image.png
    chunksSortMode
    需要注意样式覆盖问题
    script的顺序,默认四个选项: none auto dependency {function}。
    Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are `’none’ \
    ‘auto’ \ ‘manual’ \ {Function}` 默认: auto
    ‘dependency’ 按照不同文件的依赖关系来排序。

    image.png |

    参考:
    1.https://www.npmjs.com/package/html-webpack-plugin
    2.https://www.jianshu.com/p/08a60756ffda
    3.https://www.jianshu.com/p/07c8ff5ef37f
    4.https://segmentfault.com/a/1190000013883242
    5.https://juejin.im/post/6855129007785328653