摘要：上一章我們了解了的編譯環境搭建項目構建二編譯環境搭建這一章我們會結合的，介紹本地測試服務器的搭建過程。三開發環境有一些特性是專門用于開發環境的，可以幫助我們搭建一個更好的開發環境。我們可以通過配合使用來搭建本地服務。

注：以下教程均在 windows 環境實現，使用其他操作系統的同學實踐過程可能會有些出入。

??上一章我們了解了 webpack 的 ES6 編譯環境搭建：webpack 項目構建：（二）ES6 編譯環境搭建
??這一章我們會結合 webpack 的 webpack-dev-server，介紹本地測試服務器的搭建過程。

??上一章我們在 webpack 上結合了 Babel，搭建了一個可以使用 ES6 語法的開發構建平臺。（源碼下載地址：https://github.com/xh4722/web...）
??項目結構如下：

??下面我們將擴展我們的 webpackDemo，賦予我們項目本地開發的能力。

??我們在項目開發過程中一般需要經歷三個環境：開發環境、測試環境和生產環境。

開發環境是指程序員在開發軟件功能、編寫代碼時的程序運行環境；

測試環境是開發環境到生產環境的過渡，是軟件功能開發完成，在將代碼正式發布到線上時進行進一步測試的環境；

生產環境是將代碼打包發布到正式線上所運行的環境；

??不同環境的使用場景不同，對我們的 webpack 配置要求也會不一樣。

在開發環境需要的是提高開發效率，所以會需要錯誤跟蹤調試、自動編譯、熱替換（HMR）、代理（proxy）和本地數據 Mock 等等；

測試環境需要的是模擬線上環境，所以一般是克隆一份生產環境的配置，并利用一些測試工具運行測試用例；

生產環境需要將代碼提交到線上，是直接面向用戶的，這就要求我們打包的代碼有更小的體積、更快的加載速度，所以打包的重點是代碼壓縮、拆分、合并等優化操作。

??我們先從開發環境入手，一步步搭建一個高效的 webpack 開發環境。

??webpack 有一些特性是專門用于開發環境的，可以幫助我們搭建一個更好的開發環境。

錯誤跟蹤：webpack 打包后的代碼是經過重新整理和組織的，這就會造成代碼出錯的位置很難定位。Javascript 提供了 source map 功能，通過 webpack 的 devtool 可以進行配置。source map 用于將編譯后的代碼映射回原始代碼，可以更容易地追蹤錯誤和警告。source map 有很多不同的選項,每個選項的作用可以在 devtool 中查看，這里不做說明。一般在開發環境會使用 eval-source-map、cheap-eval-source-map 或者 cheap-module-eval-source-map，因為這幾個選項提供了 source map 而且有最快的代碼重構建速度，適合需要頻繁修改代碼的開發環境。

自動編譯：開發過程會經常性地修改代碼，如果每次修改都需要執行 webpack 打包生成文件，開發效率肯定是很低的。webpack 提供了三種方式用來實現源文件的自動編譯功能：（1）webpack --watch；（2）webpack-dev-server；（3）webpack-dev-middleware；

??先讓我們試用一下自動編譯的第一種方式，在 webpackDemo 的目錄下執行 webpack --watch：

??可以看到在執行了 webpack --watch 命令以后，該命令并不會馬上結束，webpack 啟動了一個監聽服務。
??在瀏覽器中打開我們的 index.html 頁面，過了一秒彈出 Hello world! 彈窗:

??現在讓我們修改當前目錄的 index.js 文件，將彈窗內的 "Hello world!" 信息修改為 "Hello webpack!" 并保存：

index.js

??控制臺信息輸出如下：

??可以看到 webpack 檢測到了入口文件的變更并自動執行了打包工作。
??讓我們刷新我們的頁面，可以看到過了一秒彈出 Hello webpack! 彈窗。

??webpack --watch 解決了入口文件變更后自動編譯的問題，但是每次修改以后都需要手動刷新頁面才能看到最新的效果。我們可以使用 webpack-dev-server 解決手動刷新的問題。
??webpack-dev-server 提供了一個簡單的 web 服務器，并提供了實時加載（live reloading）的功能。在正式使用前我們先做一些準備工作。

通過 cnpm 安裝模塊：cnpm i --save-dev webpack-dev-server@2。（webpack-dev-server@3.1.0 只支持 webpack v4）

修改 webpack.config.js：安裝 webpack-dev-server 以后，我們需要在 webpack.config.js 中通過 devServer 配置服務啟動的環境。修改 webpack.config.js 文件如下：
webpack.config.js

??我們修改了兩個地方：（1）將 output.filename 修改為 "./dist/test.js"；（2）新增 devServer，并配置資源路徑為輸出文件的位置 "./dist"；
??現在讓我們在當前目錄執行服務啟動命令：webpack-dev-server

??從控制臺信息可以看出 webpack-dev-server 啟動了一個默認端口號為 8080 的本地服務，我們可以在瀏覽器中輸入 http://localhost:8080 查看效果：

??界面顯示 Cannot GET / 找不到文件，這是因為 webpack-dev-server 會默認打開資源目錄（./dist）下的 index.html 文件，但是我們的 webpack.config.js 只配置了 output 輸出文件為 "./dist/test.js"，在 dist 目錄下并不存在 index.html 文件。
??那么怎么在 dist 目錄下生成 index.html 文件呢？我們可以使用 HtmlWebpackPlugin 完成 Html 文件的創建過程：

安裝 HtmlWebpackPlugin：cnpm i --save-dev html-webpack-plugin；

在 webpack.config.js 中啟用 HtmlWebpackPlugin：
webpack.config.js

??我們在 webpack.config.js 中聲明了 HtmlWebpackPlugin，并通過 webpack.config.js 的 plugins 引入該插件。
??現在讓我們重新啟動 webpack-dev-server 并打開瀏覽器：

??服務啟動正常。現在我們修改 index.js 文件的彈窗信息為 "Hello webpack-dev-server!"，可以看到控制臺中 webpack-dev-server 自動重新編譯，編譯完成后，頁面自動刷新：

??現在讓我們稍微休息一下，回顧一下上面 webpack-dev-server 的搭建過程，可以發現幾個比較有意思的地方：

在我們啟動 webpack-dev-server 之前，我們并沒用通過 webpack 生成實際的 ./dist 文件。在啟動服務時，我們的文件目錄如下：

也就是說 webpack-dev-server 使用的 ./dist 目錄是在它內部生成的。

我們在使用 HtmlWebpackPlugin 時沒有配置任何參數，它又是怎么在 ./dist 目錄下生成 index.html 文件，并引用 output 輸出的 test.js 文件的呢？（我這邊大概的猜測是 HtmlWebpackPlugin 會獲取 output 的設置，并根據該設置執行 Html 生成過程）

??讓我們在上面的 webpack-dev-server 基礎上做一些優化，讓服務器工作得更好：

自動打開瀏覽器：上面我們每次重啟 webpack-dev-server 之后都需要手動打開瀏覽器并輸入網址，我們可以使用 open 參數讓 webpack-dev-server 啟動成功后自動打開頁面。在 webpackDemo 目錄下啟動服務：webpack-dev-server --open，可以看到頁面自動打開了；

簡化啟動命令：加入 open 參數以后每次啟動都需要輸入命令 webpack-dev-server --open，命令很長，我們可以通過 package.json 的 scripts 項簡化啟動命令。

做了如上配置以后，只需要執行命令：npm satrt（npm start 是 npm run start 的簡寫，其他可以簡寫的命令還有 npm test、npm stop、npm restart），可以發現服務正常啟動了。

??還可以使用 Node.js API 結合 webpack-dev-server 構建服務器。新建一個 server.js 文件，用于編寫服務器代碼：

server.js

??在 server.js 里我們引入了 webpack-dev-server，并啟動了 localhost:8080 服務。
??接下來打開我們的 package.json 文件，修改我們的啟動命令：
package.json

??在當前目錄執行命令：npm start
??服務啟動成功后在瀏覽器中輸入 http://localhost:8080 打開網頁，代碼執行成功：

??但是我們發現有兩個問題：

在服務器啟動成功后瀏覽器不會自動打開；

在修改 index.js 后代碼會重新編譯，但是瀏覽器卻不會刷新；

??讓我們嘗試解決這兩個問題：

針對問題1，我們可以引入 webpack-browser-plugin 實現自動打開瀏覽器的功能：

安裝 webpack-browser-plugin 模塊：cnpm i --save-dev webpack-browser-plugin；

在 webpack.config.js 中使用該插件：
webpack.config.js

再次執行命令 npm start，可以發現瀏覽器自動打開 http://localhost:8080；

針對問題2，我們可以在 webpack.config.js 的 entry 屬性中增加 "webpack-dev-server/client?http://localhost:8080"：

??第三種啟動本地服務的方式是使用 webpack-dev-middleware。webpack-dev-middleware 是 webpack-dev-server 內部使用的一個容器，可以把 webpack 處理后的文件傳遞給一個服務器。我們可以通過 express 配合使用 webpack-dev-middleware 來搭建本地服務。

安裝 express、webpack-dev-middleware：cnpm i --save-dev express webpack-dev-middleware@2；（webpack-dev-middleware@3.1.0 只支持 webpack v4）

新建 server.js 文件，用來配置 express 服務器：
server.js

修改 package.json scripts，增加 npm run server 命令：

執行 npm run server 啟動 express 服務器；

打開瀏覽器輸入網址 http://localhost:3000，程序運行正常；

修改 index.js，彈出 "Hello webpack-dev-middleware!" 彈窗；
index.js

express 服務器自動編譯，但是瀏覽器不會自動刷新，手動刷新瀏覽器，更新成功：

??上一節的 express 服務器可以實現自動編譯的功能，但是無法自動重新加載界面，排查問題產生的原因。
??Google 查找問題，解釋如下：

??截圖來自：https://blog.cloudboost.io/li...
??可以看出來，產生這個問題的原因是 webpack-dev-server 內置了熱加載模塊，所以能檢測文件變更并自動加載頁面；而 webpack-dev-middleware 只是用于處理文件的變更，并不能控制瀏覽器的重新加載。要實現 express 的熱加載功能，就需要用到另外一個中間件 webpack-hot-middleware，熱更新的具體實現將在下一章進行介紹。

參考資料：
An Introduction to Source Maps
webpack 中文文檔