webpack原生只能理解JS和JSON文件，要支持打包其他类型的文件，都需要安装相应的插件或loader。
如果我们需要打包HTML文件，首先需要安装html-webpack-plugin插件：
npm install html-webpack-plugin -D
webpack的配置
在Webpack初识中，我们已经知道需要知道了entry、output相对于webpack配置的意义。 现在，我们需要知道一个新的配置项——plugins：
plugins选项用于以各种方式定义webpack构建过程。webpack附带的各种内置插件，可以通过这个选项，在编译时使用这些插件。
安装好html-webpack-plugin插件后，需要在webpack.config.js文件中进行配置：
// ...
// 1. 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. 在plugins中配置插件
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 指定入口模板文件（相对于项目根目录）
filename: 'index.html', // 指定输出文件名和位置（相对于输出目录）
// 关于插件的其他项配置，可以查看插件官方文档
})
]
}
确保入口模板文件的路径和文件名与配置一致，然后可以编译。
多JS入口和多HTML情况的配置
面对需要编译出多个HTML文件，且文件需要引入不同的JS文件，但默认情况下，打包后的HTML文件会引入所有打包后的JS文件，我们可以指定chunk来分配JS。
const path = require('path');
// 1. 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. 配置JS入口(多入口)
entry: {
vendor: ['./src/jquery.min.js', './src/js/common.js'],
index: './src/index.js',
cart: './src/js/cart.js'
},
// 配置出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'build/js')
},
// 3. 配置插件
plugins: [
new HtmlWebpackPugin({
template: 'index.html',
filename: 'index.html',
// 通过chunk来指定引入哪些JS文件
chunk: ['index', 'vendor']
}),
// 需要编译多少个HTML，就需要new几次插件
new HtmlWebpackPlugin({
template: './src/cart.html',
filename: 'cart.html',
chunk: ['cart', 'vendor']
})
]
}
Tip: 这里需要注意的是要编译多少个HTML文件，就要new几次
HtmlWebpackPlugin。
上面的配置编译成功后，输出情况是这样的：
build
|__ index.html # 引入index.js和vendor.js
|__ cart.html # 引入cart.js和vendor.js
|__ js
|__ vendor.js # 由jquery.min.js和common.js生成
|__ index.js # 由index.js生成
|__ cart.js # 由cart.js生成
