（如转载，请注明出处）
接（1）：
1. 自动创建HTML模版
首先安装html插件：npm i html-webpack-plugin --save-dev
安装完毕后在webpack.config.js中配置如下：
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + 'dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}
什么？到这里有可能会报错？比如这样：Cannot find module 'webpack/lib/node/NodeTemplatePlugin'。
那就卸掉全局webpack重新安装，具体操作是这样：
npm remove webpack -g
npm i webpack --save-dev
npm run dev
你会发现又好了，然后我们会发现dist目录下多了一个叫index.html的文件，内部自动引入了app.bundle.js文件。
自定义模版
用上面的配置会自动生成一个默认html模版，如果想要自定义模版，可以修改成以下配置：
plugins:[
newHtmlWebpackPlugin({
title:'Custom template',
template:'./src/my-index.html', //Load a custom template (lodash by default see the FAQ for details)
})
]
然后在src目录下建立一个my-index.html文件，输入代码，在终端运行后会在dist目录下找到index.html文件，内部代码与./src/my-index.html一致，只是多了一个app.bundle.js引入文件。
当然，我们也可以这样使用：
在./src/my-index.html下使用模版语法
我们在webpack.package.js中设置titles："My Custom template"
然后在./src/my-index.html中这样使用
打包后会得出同样的文件内容，如下：
还可以在webpack.config.js中设置minify: {
collapseWhitespace:true
}
用来清除输出模版中的空格, 和 hash: true添加hash。
输出后的样式是这样：
当然还有很多可选配置，具体可在github中搜索html-webpack-plugin查看。
