webpack之html-webpack-plugin的使用

標籤：save   localhost   根據   寫入   ref   alt   ant   例子   簡單   

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的使用