现在介绍一个webpack需要下载的插件 HtmlWebpackPlugin
这插件的作用是依据一个简单的模版，帮你生成最终的HTML5文件，这个文件中自动引用了你打包后的JS文件，每次编译都在文件名中插入一个不同的哈希值。
安装命令：npm install --save-dev html-webpack-plugin
这个插件自动完成了我买之前手动做的一些事情，在正式使用之前需要对一直依赖的项目结构做一些改变： 移除public文件夹，利用此插件，HTML5文件会自动生成，此外CSS已经通过前面的操作打包到 JS中了，public文件夹里。
在app目录下，创建一个html文件模版，这个模版包含title等其他你需要的元素，在编译过程中，本插件会依据此模版生成最终的HTML页面，会自动田间所依赖的css,js,favicon等文件，在本例中我们明明模版文件为index.tmpl.html，
先删除public文件夹
然后在app文件夹下新建一个模版 index.html,写入默认代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
如图
然后在webpack.config.js中引入这个插件
在第二行写入 var Html = require('html-webpack-plugin');
引入进来之后，需要在plugins中
new Html({
template:__dirname+'/app/index.html'
})
最后执行npm start
发现public文件夹出现了，index.html和webpack.js也出现了。
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
