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

注：以下教程均在 windows 環(huán)境實現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實踐過程可能會有些出入。

??上一章我們了解了 webpack 的 ES6 編譯環(huán)境搭建：webpack 項目構(gòu)建：（二）ES6 編譯環(huán)境搭建
??這一章我們會結(jié)合 webpack 的 webpack-dev-server，介紹本地測試服務(wù)器的搭建過程。

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

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

??我們在項目開發(fā)過程中一般需要經(jīng)歷三個環(huán)境：開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境。

開發(fā)環(huán)境是指程序員在開發(fā)軟件功能、編寫代碼時的程序運行環(huán)境；

測試環(huán)境是開發(fā)環(huán)境到生產(chǎn)環(huán)境的過渡，是軟件功能開發(fā)完成，在將代碼正式發(fā)布到線上時進(jìn)行進(jìn)一步測試的環(huán)境；

生產(chǎn)環(huán)境是將代碼打包發(fā)布到正式線上所運行的環(huán)境；

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

在開發(fā)環(huán)境需要的是提高開發(fā)效率，所以會需要錯誤跟蹤調(diào)試、自動編譯、熱替換（HMR）、代理（proxy）和本地數(shù)據(jù) Mock 等等；

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

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

??我們先從開發(fā)環(huán)境入手，一步步搭建一個高效的 webpack 開發(fā)環(huán)境。

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

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

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

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

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

??現(xiàn)在讓我們修改當(dāng)前目錄的 index.js 文件，將彈窗內(nèi)的 "Hello world!" 信息修改為 "Hello webpack!" 并保存：

index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

??讓我們在上面的 webpack-dev-server 基礎(chǔ)上做一些優(yōu)化，讓服務(wù)器工作得更好：

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

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

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

??還可以使用 Node.js API 結(jié)合 webpack-dev-server 構(gòu)建服務(wù)器。新建一個 server.js 文件，用于編寫服務(wù)器代碼：

server.js

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

??在當(dāng)前目錄執(zhí)行命令：npm start
??服務(wù)啟動成功后在瀏覽器中輸入 http://localhost:8080 打開網(wǎng)頁，代碼執(zhí)行成功：

??但是我們發(fā)現(xiàn)有兩個問題：

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

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

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

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

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

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

再次執(zhí)行命令 npm start，可以發(fā)現(xiàn)瀏覽器自動打開 http://localhost:8080；

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

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

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

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

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

執(zhí)行 npm run server 啟動 express 服務(wù)器；

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

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

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

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

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

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