實例講解webpack的基本使用第三篇

這一篇來說解一下webpack的htmlWebpackHtml插件的使用。

先來思考一個實際問題：咱們如今在index.html引用的js文件是寫死的。可是咱們每次打包後的文件都是動態的，那麼咱們怎麼讓他們結合起來呢？

這就要藉助htmlWebpackPlugin插件了。

1.先安裝html-webpack-plugin插件。

執行：npm install html-webpack-plugin --save-dev。

2.在webpack.config.js文件中require這個插件模塊

3.在webpack.config.js文件中添加一個plugins配置項：

每一項參數的具體做用請查看上面代碼的註釋部分。

4.下面來演示一遍。

看下具體的每個參數是怎麼使用的。

咱們創建在根目錄下創建一個index.html文件。

加上以下代碼輸出htmlwebpackPlugin這個對象的屬性。

 

打包之生成的結果爲：file 和options。發現有兩個屬性。

而後在分別將這兩個屬性打印出來看裏面有什麼東西。

打包以後頁面生成的結果爲：

 全部的屬性咱們都一目瞭然了。

接下來要用什麼屬性，只要去調用就行了。

如調用title：

 

前臺輸出的爲：

 

調用對應的js引用：

 

前臺輸出的爲：

調用options裏面的時間：

前臺輸出爲：

單文件html打包基本上就差很少了。

下面繼續講解如何打包生成多文件：

需求：我須要利用一個模板生成三個不一樣的文件，每一個文件調用對應的js文件，擁有對應的title，而且三個文件擁有擁有共同的js。

在webpack.config.js文件添加以下配置。

具體參數的功能看請看註釋

而後創建一個tem.html文件：

打包以後就實現了咱們上面的需求。

具體實現，請下載源代碼。