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