※ 今天內容

一、quasar dev 的中間過程在做什麼？
二、示範變動全部內容與部分內容的機制：Live loading 與 Hot Reload
三、Webpack Dev Server 上除錯編譯前的原始碼： inline-source-map
四、總結
五、延伸閱讀：Webpack Hot Module Replacement 的原理解析

一、quasar dev 的中間過程在做什麼？ Webpack Dev Server

1. 將專案檔案經過 Webpack 編譯
2. 架設一個臨時小型的HTTP Server，存放Webpack 編譯後的網頁與程式
3. 將Webpack 編譯後的檔案，從臨時小型的HTTP Server更新並到瀏覽器上，監聽編譯的檔案是否被更動
4. 一旦網頁或程式碼經過任何修改，重整畫面，或者更新變動的部分到畫面上

(一)Webpack 編譯的過程發生了什麼事？

將所有的檔案，以及使用的相依套件程式碼，透過Loader與Plugins 處理與轉換後，合併成單個或多個js檔與css檔案，引入到單一的index.html

(二)Webpack 透過什麼臨時小型的HTTP Server？

是一個小型的Express server，用於存放並監聽Webpack檔案編譯過後的檔案

根據官方說明:

webpack-dev-server doesn't write any output files after compiling. Instead, it keeps bundle files in memory and serves them as if they were real files mounted at the server's root path.

也就是說，伺服器上所有的檔案都是存放在記憶體，而非存放在實體的硬碟當中

(三)webpack-dev-server 怎麼取得webpack編譯後的檔案

webpack-dev-middleware
是介於webpack與webpack-dev-server的中間層

(四)每當檔案經過變動後，瀏覽器怎麼知道要重新整理或變動部分的內容

webpack-dev-server 的 Hot Module Replacement
透過 socket.io 通知瀏覽器，重新整理或更新部分的畫面

二、示範變動全部內容與部分內容的機制：Live loading 與 Hot Module Replacement

透過 hot module replacement 將更改前與更改後的資訊轉換成hash值做比對
決定是否更新部分的內容，或者重新整理畫面

我們實際來示範Live loading 與 Hot Module Replacement

(一) Live loading

這是我在src/pages/Index.vue的程式碼：

<template>
  <q-page class="flex flex-center">
  <div>
    <h1>Hi</h1>
    <img
      alt="Quasar logo"
      src="~assets/quasar-logo-full.svg"
    >
  </div>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex'
}
</script>

1. 首先看到，第一次執行quasar dev 時，網頁的內容：

2. 當我拿掉了圖片後，下方的請求改變了，代表網頁經過重新整理：

(二) Hot Module Replacement

1. 首先看到，第一次執行quasar dev 時，網頁的內容：
   

2. 接著，將網頁上的Hi改成Bye
   網頁並沒有重新整理，而是多出了一個Request：

三、Webpack Dev Server 上除錯編譯前的原始碼： inline-source-map

由於測試環境，是存放編譯後過後檔案
但是在開發的時候，如果我們的程式碼出現錯誤
我們希望知道，錯誤是發生在「編譯之前的哪一個檔案，底下的哪一行」，方便我們除錯
這時我們需要Webpack 的 inline-source-map，Quasar本身已經設定好了這個特性

假設我在程式碼檔了一行console.logs()，藉由SourceMap就能知道
這行錯誤的程式碼是在Index.vue的第18行：

四、Webpack Dev Server的常用設定

1. Port：Dev Server的網址Port
2. host：Dev Server的網址Host名稱
3. open：用什麼瀏覽器打開Dev Server的網址
4. public：用於反向代理
5. https：在Dev Server使用Https的設定

詳請可參考Quasar 的官方文件以及Webpack的官方文件

五、總結

以上是介紹Webpack的開發測試伺服器，在專案開發時比較重要的功能特性
Quasar 框架皆已經包含並設定好這些Webpack的功能特性。

六、延伸閱讀：Webpack Hot Module Replacement 的原理解析

Webpack Hot Module Replacement 的原理解析