webpack學習(六) -- webpack自動生成html文件並引入js包

html in webpack

痛點：html是咱們前端最最基礎的也是最接近視圖的部分，上文中說到關於css的部分，咱們的案例都是要本身建立html文件，而後把打包後的js和css文件手動引入html中。

這樣狠繁瑣呀，因此本文就是要學習，怎麼用webpack實現經過當前的html文件，自動生成一個html文件並把打包後的css和js文件引入。

痛點

在webpack配置文件中，咱們生成的當前文件名爲：

若在名稱後面拼上5倍的hash值，在打包後包的名稱後就會自動拼出不定的5倍hash值:

能夠看到打包後的文件名都帶了hash值

而後，咱們就要手動的把html中引入的兩個文件名都修改爲帶hash的名字，這樣的話，每次打包名字改變，引入就須要修改，很麻煩，也不科學

解決辦法(html-webpack-plugin插件)

html-webpack-plugin能夠將html單獨抽離出來而且能夠進行壓縮或者配置

解決過程

下載插件

npm install html-webpack-plugin -D
複製代碼

配置

• 引入

在webpack配置文件中引入插件

• 應用插件

在配置文件中的plugins插件數組裏加入該插件

• 配置插件

在插件裏配置插件單獨抽離出來的html的名稱

在咱們本身的html中會有一些dom結構，在插件處理後要保證這些dom還在，因此咱們須要配置插件要抽離的html的模版

若模版中有註釋、空格，咱們也能夠進行壓縮

執行

• 執行webpack命令進行打包

webpack
複製代碼

• 結果

dist打包文件中多出了index.html文件

index.html文件中包好了模版html中的全部內容，還多出了打包後的css和js文件

'意外驚喜'(clean-webpack-plugin插件)

當我覺得這個插件學習完了，沒啥問題的時候，忽然發現，dist文件裏，爲何我每次打包後，以前的打包文件還存在文件夾中，這是很很差的體驗，也讓人分不清哪一個是新打包的文件

趕忙尋找解決辦法啊，這時候我又學習到了另外一個插件，就是clean-webpack-plugin插件(不得不感嘆，插件真的是神奇，沒有各類插件，咱們的開發簡直困難重重呀)。

這個插件的做用就是清除上一次打包好的文件

下載

npm install clean-webpack-plugin -D
複製代碼

引入

應用

執行打包

webpack
複製代碼

結果

能夠看到dist文件裏只有當次打包好的文件了，以前的都刪除了

結尾

其實這些小插件還有不少配置，這裏只是介紹了咱們須要的一些配置，若想進一步瞭解，這裏附上連接 html-webpack-plugin