官方文檔：https://www.npmjs.com/package/html-webpack-plugin
html-webpack-plugin 插件專門為由webpack打包后的js提供一個載體，即一個HTML模板，里面通過script標簽引用打包后的JS。
下面來看一下基本配置：
1 const Path = reqiure('path) 2 // 引入插件 3 const HtmlWebpackPlugin = require('html-webpack-plugin') 4 5 module.exports = { 6 entry: 'index.js', 7 output: { 8 path: Path.resolve(__dirname, '/dist') 9 filename: 'bundle.js' 10 }, 11 plugins: [ 12 // 所有的插件都是對象，需要new出來 13 new HtmlWebpackPlugin() 14 // 上面是一個0配置的html-webpack-plugin插件對象 15 ] 16 }
上面只是單純的創建了一個插件對象，並沒有做其他配置，所以默認產生的HTML模板是這樣的：
1 <!-- HTML5 --> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Webpack App</title> 7 </head> 8 <body> 9 <script src="bundle.js"></script> 10 </body> 11 </html>
當然，畢竟該插件是提供一個承載JS的模板，如果你對它的默認模板不滿意，那么你完全可以自定義一個模板，下面來看一下它常見的配置項。
Options：
1. title：配置模板的標題
2. filename：配置模板的文件名
3. template：指定模板文件的路徑（這里是選擇一個你自定義的html文件作為模板）
5. hash：給模板中包含的所有css和js文件設置一個唯一的hash字符串插入到文件名中
6. inject：該屬性決定了腳本文件插入的位置。值可以是字符串也可以是布爾值，默認為true，字符串值可以為‘head’（插入到head標簽）和‘body’（插入到body底部）
7. minify：壓縮HTML，默認為true，值也可以為對象
本文只是先簡單介紹了下html-webpack-plugin插件的各個常用配置，因本人水平有限，不做過多深入講解，日后遇到問題，及時更新。