HtmlWebpackPlugin 配置

簡介

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} 提供一個函數？