webpack之html-webpack-plugin的使用

webpack实际使用过程当中有一个经常使用的插件html-webpack-plugin。html-webpack-plugin会帮助咱们自动生成一个html页面，而且能够在页面中动态写入页面title和连接的bundle.js文件。

使用的缘由

webpack在打包时，会从entry中的入口js文件开始，寻找组件的依赖关系，最终根据output中的配置在对应的目录中生成打包出来的bundle.js文件。若是咱们本身定义一个index.html文件，可能会面临一些问题：一个是实际生产上的bundle.js文件后面都有一个hash值，打包以前这个值是不知道，直接在页面中给定bundle文件的路径就不太好；另外的缘由是这个bundle.js文件的命名是根据webpack配置的output.filename动态生成，在index.html页面中直接引入也不太方便；还有一个缘由，webpack在打包后生成的文件通常会在一个dist目录下面，运行时，再将index.html手动拷贝到dist目录下终究不是一个好办法。
这些问题，html-webpack-plugin都能很好的帮我咱们解决。插件的详细使用能够去这个地址。

下面一个简单的例子来讲明这个插件的用法

项目的目录结构及说明

项目源码放在src目录下，各文件的说明以下：
template.html--项目的入口html文件
index.js--项目打包的入口文件
hello.js--index.js依赖的文件

安装及使用

html-webpack-plugin不是webpack内置的plugin，须要安装。
npm install html-webpack-plugin --save-dev

安装完后，须要在webpack中引入插件

使用webpack命令进行build后，会在生成以下目录和文件

查看下咱们生成的html文件：

在devServer中使用

实际开发过程当中，会常常修改代码，每次改后从新发布到dist目录，而后刷新浏览器，这样作不太方便。使用devServer能简化这个流程，下面看看使用devServer的配置。

使用命令webpack-dev-server --hot启动
而后在浏览器中修改地址为http://localhost:3000/admin.html