简介

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

安装

npm i --save-dev html-webpack-plugin
yarn add --dev html-webpack-plugin

属性

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

       inject有四个值: true body head false
       
       true 默认值,script标签位于html文件的 body 底部
       body script标签位于html文件的 body 底部
       head script标签位于html文件的 head中
       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}

       'dependency' 不用说,按照不同文件的依赖关系来排序。
       'auto' 默认值,插件的内置的排序方式,具体顺序....
       'none' 无序?
       {function} 提供一个函数?
    

无雪冬天
32 声望0 粉丝

这家伙喜欢折腾