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

webpack之html-webpack-plugin的使用