webpack之html-webpack-plugin
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/，效果如下：
