webpack使用html-webpack-plugin動態建立html

透過樣板動態產生html頁面內容
可以使用變數帶入要載入的js檔案,css檔案

plugin預設使用ejs樣板系統 不需設定loader即可直接使用
但樣板的副檔名 一定要是.ejs,樣板內可以使用lodash語法操作
一.主要的plugin設定

filename: '../index.html', #路徑是相對於webpack設定的 output.path
template: './src/index.ejs', #指定使用樣板,路徑是相對於gulp執行的位置
title: 'my title' #插入到html title
inject:是否插入 js與css檔案到html上

二.樣板內取得的資料來源
在樣板內可以直接取得以下三個物件資料
1.htmlWebpackPlugin

{
  "files": {
    "css": [ "main.min.css" ],
    "js": [ "bundle/main.min.js", "bundle/common.js"],
    "chunks": {
      "main.min": {
        "entry": "bundle/main.min.js",
        "css": [ "main.min.css" ]
      },
      "common": {
        "entry": "bundle/common.js",
        "css": []
      },
    }
  }
}

2.webpack 直接取到webpack state物件資料
3.webpackConfig 直接參考到目前使用的webpackConfig物件

三.在樣板內使用資料
1.若要自行控制載入js,css,需設定inject:false
2.取得檔案的路徑可以透過如
  htmlWebpackPlugin.files.chunks.xxx.entry拿到js路徑
例

<script src="<%=htmlWebpackPlugin.files.chunks['common'].entry%>"></script>