webpack 項目構建：（三）開發環境——本地服務器搭建

注：如下教程均在 windows 環境實現，使用其餘操做系統的同窗實踐過程可能會有些出入。

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

1、上期回顧

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

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

2、開發環境、測試環境和生產環境

  咱們在項目開發過程當中通常須要經歷三個環境：開發環境、測試環境和生產環境。

1. 開發環境是指程序員在開發軟件功能、編寫代碼時的程序運行環境；
2. 測試環境是開發環境到生產環境的過渡，是軟件功能開發完成，在將代碼正式發佈到線上時進行進一步測試的環境；
3. 生產環境是將代碼打包發佈到正式線上所運行的環境；

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

1. 在開發環境須要的是提升開發效率，因此會須要錯誤跟蹤調試、自動編譯、熱替換（HMR）、代理（proxy）和本地數據 Mock 等等；
2. 測試環境須要的是模擬線上環境，因此通常是克隆一份生產環境的配置，並利用一些測試工具運行測試用例；
3. 生產環境須要將代碼提交到線上，是直接面向用戶的，這就要求咱們打包的代碼有更小的體積、更快的加載速度，因此打包的重點是代碼壓縮、拆分、合併等優化操做。

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

3、webpack 開發環境

  webpack 有一些特性是專門用於開發環境的，能夠幫助咱們搭建一個更好的開發環境。

1. 錯誤跟蹤：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 並且有最快的代碼重構建速度，適合須要頻繁修改代碼的開發環境。
2. 自動編譯：開發過程會常常性地修改代碼，若是每次修改都須要執行 webpack 打包生成文件，開發效率確定是很低的。webpack 提供了三種方式用來實現源文件的自動編譯功能：（1）webpack --watch；（2）webpack-dev-server；（3）webpack-dev-middleware；

4、webpack --watch

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

  能夠看到在執行了 webpack --watch 命令之後，該命令並不會立刻結束，webpack 啓動了一個監聽服務。
  在瀏覽器中打開咱們的 index.html 頁面，過了一秒彈出 Hello world! 彈窗:

  如今讓咱們修改當前目錄的 index.js 文件，將彈窗內的 'Hello world!' 信息修改成 'Hello webpack!' 並保存：

index.js

  控制檯信息輸出以下：

  能夠看到 webpack 檢測到了入口文件的變動並自動執行了打包工做。
  讓咱們刷新咱們的頁面，能夠看到過了一秒彈出 Hello webpack! 彈窗。

5、webpack-dev-server

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

1. 經過 cnpm 安裝模塊：cnpm i --save-dev webpack-dev-server@2。（webpack-dev-server@3.1.0 只支持 webpack v4）
2. 修改 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 文件的建立過程：

1. 安裝 HtmlWebpackPlugin：cnpm i --save-dev html-webpack-plugin；
2. 在 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 的搭建過程，能夠發現幾個比較有意思的地方：

1. 在咱們啓動 webpack-dev-server 以前，咱們並沒用經過 webpack 生成實際的 ./dist 文件。在啓動服務時，咱們的文件目錄以下：
   
   也就是說 webpack-dev-server 使用的 ./dist 目錄是在它內部生成的。
2. 咱們在使用 HtmlWebpackPlugin 時沒有配置任何參數，它又是怎麼在 ./dist 目錄下生成 index.html 文件，並引用 output 輸出的 test.js 文件的呢？（我這邊大概的猜想是 HtmlWebpackPlugin 會獲取 output 的設置，並根據該設置執行 Html 生成過程）

6、webpack-dev-server 啓動優化

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

1. 自動打開瀏覽器：上面咱們每次重啓 webpack-dev-server 以後都須要手動打開瀏覽器並輸入網址，咱們可使用 open 參數讓 webpack-dev-server 啓動成功後自動打開頁面。在 webpackDemo 目錄下啓動服務：webpack-dev-server --open，能夠看到頁面自動打開了；
2. 簡化啓動命令：加入 open 參數之後每次啓動都須要輸入命令 webpack-dev-server --open，命令很長，咱們能夠經過 package.json 的 scripts 項簡化啓動命令。
   
   作了如上配置之後，只須要執行命令：npm satrt（npm start 是 npm run start 的簡寫，其餘能夠簡寫的命令還有 npm test、npm stop、npm restart），能夠發現服務正常啓動了。

7、使用 Node.js 結合 webpack-dev-server

  還可使用 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 打開網頁，代碼執行成功：

  可是咱們發現有兩個問題：

1. 在服務器啓動成功後瀏覽器不會自動打開；
2. 在修改 index.js 後代碼會從新編譯，可是瀏覽器卻不會刷新；

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

1. 針對問題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. 針對問題2，咱們能夠在 webpack.config.js 的 entry 屬性中增長 'webpack-dev-server/client?http://localhost:8080'：
   

8、webpack-dev-middleware

  第三種啓動本地服務的方式是使用 webpack-dev-middleware。webpack-dev-middleware 是 webpack-dev-server 內部使用的一個容器，能夠把 webpack 處理後的文件傳遞給一個服務器。咱們能夠經過 express 配合使用 webpack-dev-middleware 來搭建本地服務。

1. 安裝 express、webpack-dev-middleware：cnpm i --save-dev express webpack-dev-middleware@2；（webpack-dev-middleware@3.1.0 只支持 webpack v4）
2. 新建 server.js 文件，用來配置 express 服務器：
   server.js
   
3. 修改 package.json scripts，增長 npm run server 命令：
   
4. 執行 npm run server 啓動 express 服務器；
5. 打開瀏覽器輸入網址 http://localhost:3000，程序運行正常；
   
6. 修改 index.js，彈出 'Hello webpack-dev-middleware!' 彈窗；
   index.js
   
7. express 服務器自動編譯，可是瀏覽器不會自動刷新，手動刷新瀏覽器，更新成功：
   

9、webpack-dev-middleware 優化

  上一節的 express 服務器能夠實現自動編譯的功能，可是沒法自動從新加載界面，排查問題產生的緣由。
  Google 查找問題，解釋以下：

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

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