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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

??先讓我們?cè)囉靡幌伦詣?dòng)編譯的第一種方式，在 webpackDemo 的目錄下執(zhí)行 webpack --watch：

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

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

index.js

??控制臺(tái)信息輸出如下：

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

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

通過 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 配置服務(wù)啟動(dòng)的環(huán)境。修改 webpack.config.js 文件如下：
webpack.config.js

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

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

??界面顯示 Cannot GET / 找不到文件，這是因?yàn)?webpack-dev-server 會(huì)默認(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

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

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

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

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

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

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

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

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

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

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

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

server.js

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

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

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

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

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

??讓我們嘗試解決這兩個(gè)問題：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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