<03 - 啟動原始碼> 使用 webpack-dev-server 及 webpack watch mode 來啟動吧！！

2017鐵人賽 carlos chang webpack watch mode webpack-dev-server

Carlos Chang

2016-12-03 00:21:12

4990 瀏覽

分享至

前兩天，我們分別介紹了

其實已經建好了一個非常簡單的頁面，即 index.html 檔，但要如何開啟它呢？

你可以直接將它點兩下直接用瀏覽器開啟，但顯然這不是個好方法，我們需要 web server 來啟動原始碼。幸好， webpack 有 webpack-dev-server 可以使用，讓我們可以快速啟動原始碼，有網址可以使用。

該來動手做囉

安裝 webpack-dev-server

進入到專案資料夾底下：

$ cd ~/path/to/webpack_proj

再執行以下指令即可安裝完成：

$ npm install webpack-dev-server --save-dev

啟動原始碼

在專案資料夾下，執行以下指令，就會產生 http://localhost:8080 的網址，直接指向到專案資料夾：

$ webpack-dev-server --open

執行完後會直接自動開啟瀏覽器，如下圖所示：

眼尖的看倌們，應該會發現網址好像有點不太一樣，會出現 http://localhost:8080/webpack-dev-server/，那跟 http://localhost:8080 有什麼差異嗎？

其實你直接改成 http://localhost:8080 即可，就會是一般的正常頁面。

而 http://localhost:8080/webpack-dev-server/ 其實是 inline mode，也就是真正的內容是用 iframe 來載入的，然而也有提供其它功能，例：如果你有修改檔案並儲存的時候，頁面會自動 refresh(live reloading)，有錯誤的話，也會有提示訊息，算是一種除錯模式吧。其實我們可以再進一步看一下頁面產生後的原始碼，僅列出 <body> 內的部份：

<body>
  <div class="header">
    <span id="okness"></span>
    <span id="status">App ready.</span>
  </div>
  <pre id="errors" style="display: none;"></pre>
  <div id="warnings"></div>
  <iframe id="iframe" src="http://localhost:8080/" allowfullscreen="" style="display: block;"></iframe>
</body>

會發現其實它就是透過 iframe 載入 http://localhost:8080/ 頁面的內容，而其它地方，會有額外的資訊提供，也算是滿方便的。

所以總結一下，webpack-dev-server 提供了兩個很重要的功能

提供 web server：讓我們有 http://localhost:8080 及 http://localhost:8080/webpack-dev-server/ 可使用。
inline mode 支援 live reloading：也就是在瀏覽 http://localhost:8080/webpack-dev-server/ 網址時，只要檔案有修改，頁面會自動重新整理。

webpack watch mode

透過 webpack-dev-server，我們有了 web server，也有了 live reloading，但這時要留意一下，live reloading 並不會將你修改的 app/index.js 重新 bundle 的，也就是原模組的內容並不會改變。

所以我們需要另開一個 terminal，執行以下指令，來偵測只要檔案有修改，就要重新 bundle，也就是所謂的 webpack watch mode：

$ webpack --watch
Webpack is watching the files…

Hash: 05325635ef224df84ca2
Version: webpack 2.1.0-beta.27
Time: 408ms
    Asset    Size  Chunks             Chunk Names
bundle.js  543 kB       0  [emitted]  main
   [3] ./app/index.js 265 bytes {0} [built]
    + 3 hidden modules

所以結合 webpack watch mode 和 webpack-dev-server，我們就可以真正的啟動原始碼了！