HtmlWebpackPlugin 常用配置

简介

HtmlWebpackPlugin 是webpack的一个插件，用户可以使用模版，通过webpack生成html文件，不同格式的模版采用不同的加载器。

常用属性标红。

属性

• title 生成html的标题
• filename 生成html的文件名，默认是index.html，可以添加路径比如：src/index.html
• template 模版的路径
• templateParameters 模版需要的参数

• inject

  1. inject有四个值： true body head false

  2. true 默认值，script标签位于html文件的 body 底部

  3. body script标签位于html文件的 body 底部

  4. head script标签位于html文件的 head中

  5. false 不插入生成的js文件，这个几乎不会用到的

• favicon html的favicon路径
• meta 插入的meta标签内容 例如 meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
• minify 使用minify会对生成的html文件进行压缩
• hash 对所有css 和 js文件追加webpack生成的hash值
• cache 缓存，只有内容变化的时候生成新文件
• showErrors 是否把错误输出到html文件
• chunks chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么chunks 就能选择你要使用那些js文件
• excludeChunks 排除掉一些js
• xhtml 一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。

• chunksSortMode script的顺序，默认四个选项： none auto dependency {function}

  1. 'dependency' 不用说，按照不同文件的依赖关系来排序。

  2. 'auto' 默认值，插件的内置的排序方式，具体顺序....

  3. 'none' 无序？

  4. {function} 提供一个函数？