html-webpack-plugin插件用於生成HTML入口文件。
html-webpack-plugin配置項：
title：生成html文檔的標題。
filename：輸出文件的文件名稱，默認為index.html，還可以指定輸出文件目錄（html/index.html）。
template：本地模板文件的路徑，支持加載器(如handlebars、ejs、undersore、html等)。
templateContent：指定模板的內容，不能與template共存，templateContent可以是一個字符串，可以是一個函數返回html字符串，也可以異步調用返回html字符串。
inject：true | 'head' | 'body' | false，注入所有資源到特定的template或templateContent中，如果設置為true或body，則所有的Javascript資源將被放置到body元素的底部，設置為head將放置到head元素中，設置為false表示所有的靜態資源都不會被放置到模板中。
favicon：添加特定的 favicon 路徑到輸出的 HTML 文件中。
hash：true | false 表示是否給所有包含的js、css文件后面添加hash值,可以用來清除緩存，
chunks：用來指定生成的html文件需要包括哪些入口文件，如不設置則所以入口JS文件都會被引入進來。
如：入口文件有index.js\main.js\common.js，如果chunks不設置，則這幾個入口文件都會被引入，如設置chunks:['index','main']則index.js\main.js文件會被引入。
配置單個html頁面
/package.json
package.json文件部分內容
{ "scripts": { "start": "webpack-dev-server --hot --inline" }, "devDependencies": { "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.22.0", "css-loader": "^0.26.1", "file-loader": "^0.10.0", "html-webpack-plugin": "^2.28.0", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^2.2.1", "webpack-dev-server": "^2.3.0" } }
/webpack.config.js
webpack.config.js文件
var HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './app/index.js', output: { path: 'dist/', filename: '[name].js' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, plugins: [ new HtmlwebpackPlugin({ template: './app/index.html', }) ], devServer: { historyApiFallback: true } };
app/index.js
require('./style.css');
app/style.css
h1{
color: red;
}
app/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板文件</title>
</head>
<body>
<h1>配置單個HTML文件</h1>
</body>
</html>
執行webpack命令生成dist目錄及目錄下的index.html，index.js文件，index.html內容引用的是./app/index.html下的內容。執行npm start命令啟動http://localhost:8080/，效果如下：
配置多個html頁面
plugins: [ new HtmlwebpackPlugin({ template: './app/index.html', }), new HtmlwebpackPlugin({ filename: 'list.html', template: './app/list.html', }) ]
app/list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板文件</title>
</head>
<body>
<h1>配置多個HTML文件</h1>
</body>
</html>
執行webpack命令生成dist目錄及目錄下的index.html，list.html，index.js文件。執行npm start命令啟動http://localhost:8080/，效果如下：
