背後靈魂 webpack (3) - html-webpack-plugin & devServer
上回文章：背後靈魂 webpack (2) — CSS 入門 loader & plugin
這回要針對 index.html 以及裡面的 script link 來設定一些配置。
在介紹主角前，我們會多加幾個檔案與程式碼，模擬專案開發時會遇到的狀況。
目錄
- 逃離瀏覽器快取
- clean-webpack-plugin
- html-webpack-plugin
- 動態注入 - devServer
- 熱模組更新
- 內網連線
逃離瀏覽器快取
瀏覽器為了使用者體驗，會在使用者開啟網頁後，把檔案暫存起來，等到下次再開啟時就能去取舊的暫存檔案，在短時間內快速打開。
但瀏覽器是以檔案名稱來做辨識的，所以有時候部署後，明明內容差很多，但因為名稱是一樣的，瀏覽器會一直拿舊的暫存檔，這樣就不會出現新版本的網頁啦。
也因此 webpack 有提供編譯時在檔名上加上 hash 的功能：
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}把剛剛的 [name].js 加上 [hash] 的話，只要有檔案改動，就會產生出不同 hash 值。
webpack 除了提供
hash之外，還有chunkhash與contenthash可以使用，詳細可以參考延伸閱讀。
clean-webpack-plugin
傳送門
在剛剛設置完 hash 後，會發現第一個問題：
- 每次編譯前，都要先刪掉舊檔案。
而這個插件主要是幫助我們在編譯時候刪除 dist 資料夾，直接來安裝：
$ npm install --save-dev clean-webpack-plugin接著在 webpack.config.js 內使用就會自動清除 dist 資料夾了。
html-webpack-plugin
傳送門
再來就是這回的主角，這個問題也是從一開始就有了：
index.html的script和link路徑檔名要一直手動改。
這插件可以讓我們可以在 HTML 內塞入動態資料來達成目的，而這也是 SPA 頁面用到的核心「動態塞入不同的內容進入一隻 HTML」。
不太了解 SPA 的話可以先看這篇文章～
跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR
先來回顧一下現在的檔案結構：
webpack-demo
|- /src
|- index.js
|- utils.js
|- /css
|- index.css
|- /assets
|- demo.png
+ |- index.html新增的檔案 index.html 內容（空空的）：
安裝：
$ npm install html-webpack-plugin --save-dev接著一樣在 webpack.config.js 做設定：
template：要使用的模板，通常會使用動態資料傳入一隻 HTML。filename：匯出檔案的名稱。
在編譯後可以看到 webpack 自動幫我們把有進入 entry 的都連結上 HTML 了！
動態注入
當然他的功能還不只這樣，另一個強大的功能是注入，也就是剛剛提到的 SPA 單頁式應用頁面的核心。
我們可以像下面這樣使用 EJS 語法插入：
<%= htmlWebpackPlugin.options.xxx %>Before：
After：
webpack-dev-server
傳送門
目前的開發模式是透過 webpack --watch 來監聽檔案變動重新編譯，但編譯後我們還是要用一些工具去開啟 dist 資料夾。
這邊要介紹一個更方便的工具，像是用 Vue-Cli 這種建出來的專案都會附上的 webpack-dev-server：
$ npm install webpack-dev-server --save-dev接著更改 package.json 配置，把 serve 處由 webpack 改為 webpack-dev-server，因為只會在開發時使用，也當然 build 就不需要改了。
除了在 command line 加上設定：
webpack-dev-server --color --compress --port 9000也可以像這樣在 webpack.config.js 配置 devServer：
這邊是一些常用到的屬性：
熱模組更新
其中熱模組更新 ( HMR - hot module replacement ) 是非常好用的，他會自動重新渲染改過的部分，透過這點可以節省非常多的開發時間。
要開啟的話，必須引入 webpack 裡的兩個插件，並且 hot 與 line 模式必須為 true：
接著打開 chrome 除錯工具可以看到這兩行就代表開啟了！
內網連線
文件內有提到 port 設置為 0.0.0.0 的話可以讓同個網域下的不同裝置連上網頁。
devServer: {
port: '0.0.0.0'
}設置完後如果是 windows 系統的話可以打開 cmd 輸入 ipconfig 查詢 IP，mac 則是到 wifi 設定下點選進階，或是 terminal 輸入 ifconfig：
此時如果手邊有手機也連同個網路的話，可以輸入 host 加上 port 口就能連上網頁了！
想跳過查詢 IP 的步驟的話可以把
useLocalIp設為true，當打開 server 時就會以內網 IP 顯示在網址列了！
延伸閱讀
hash & chunkhash & contenthash
hash：會跟整個專案相關，只要檔案變更過後就會換一次chunkhash：跟entry的設定相關，假如我只更改entry2的話只有 2 會變更，entry1不會變更檔名，瀏覽器就不用重新請求entry1。contenthash：上面是跟entry相關，contenthash則是跟檔案相關，只要檔案沒變更就不會重新計算hash。
更詳細請參考：
