深刻淺出webpack學習(8)--配置DevServer

devServer

上一章介紹過DevServer能夠用來提升開發效率，它提供一些配置能夠改變DevServer的默認行爲。要配置DevServer除了在配置文件裏經過devServer傳入參數外，還能夠經過命令行參數傳入。注意只有在經過DevServer去啓動webpack時配置文件裏devServer纔會生效，由於這些參數所對應的功能都是DevServer提供的，webpack自己並不認識devServer配置項。

1. hot

devServer.hot配置是否啓用模塊熱替換功能。DevServer默認的行爲是在發現源代碼被更新後會經過自動刷新整個頁面來作到實現預覽，開啓模塊熱替換功能後在不刷新整個頁面的狀況下經過用心模塊替換老模塊來實現實時預覽。

2. inline

DevServer的實時預覽功能依賴注入到頁面裏的代理客戶端去接受來自DevServer的命令和負責刷新網頁的工做。devServer.inline用於配置是否自動注入這個代理客戶端到將運行在頁面的Chunk裏面，默認是會自動注入。DevServer會根據你是否開啓inline來調整它的自動刷新策略：

1. 若是開啓inline， DevServer會在構建完變化後的代碼時經過代理客戶端控制網頁刷新。
2. 若是關閉inline， DevServer將沒法直接控制要開發的網頁。這時它會經過iframe的方式去運行要開發的網頁，當構建完變化後的代碼經過刷新iframe來實現實時預覽。

3. historyApiFallback

devServer.historyApiFallback用於方便的開發使用HTML5 HistroyAPI的單頁應用。這類單頁應用要求服務器針對任何命中的路由都返回一個對應的HTML文件，例如在訪問http://localhost/user和http://localhost/home時都返回index.html文件，瀏覽器端的JavaScript代碼會從URL裏解析出當前的狀態，顯示對應的界面。

這會致使任何請求都會返回index.html文件，這智能用於只有一個HTML文件的應用。

若是應用由多個單頁應用組成，這時就須要DevServer根據不一樣的請求返回不一樣的HTML文件：配置以下：

historyApiFallback: {
    //使用正則匹配命中路由
    rewrites: [
        {from: /^\/user/, to: '/user.html'},
        {from: /^\/game/, to: '/game.html'},
        {from: /./, to: '/index.html'}
    ]
}

4. contentBase

devServer.contentBase配置DevServer HTTP服務器的文件根目錄。默認狀況下爲當前執行目錄，因此通常沒必要設置它，除非有額外的文件須要被DevServer服務。例如你想把項目根目錄下的public目錄設置成DevServer服務器的文件根目錄：

devServer: {
    contentBase: path.join(__dirname, 'public')
}

DevServer服務器經過HTTP服務暴露出的文件分爲兩類：

1. 暴露本地文件
2. 暴露webpack構建出的結果，因爲構建出的結果交給DevServer，因此你在使用DevServer時在本地找不到構建出的文件。

contentBase只能用來配置暴露本地文件的規則，你能夠經過contentBase: false來關閉暴露本地文件。

5. headers

devServer.headers配置項能夠在HTTP響應中注入一些HTTP響應頭，使用以下：

devServer: {
    headers: {
        'X-foo': 'bar'
    }
}

6. host

devServer.host配置項用於配置DevServer服務器監聽的地址。若是你想要局域網中其餘設備訪問你本地的服務，能夠在啓動的時候帶上--host 0.0.0.0.host的默認值是127.0.0.1即只有本地能夠訪問DevServer的HTTP服務。

7. port

devServer.port配置項用於配置DevServer服務監聽的端口，默認使用8080端口。若是8080端口已經被其餘程序佔有就使用8081....

8. allowedHosts

devServer.allowedHosts配置一個白名單列表，只有HTTP請求的HOST在列表裏才正常返回，使用以下：

allowedHosts: [
    //匹配單個域名
    'host.com',
    'sub.host.com',
    / host2.com 和全部的子域名 *.host2.com 都將匹配
    '.host.com'
]

9. disableHostCheck

devServer.disableHostCheck配置項用於配置是否關閉用於DNS重綁定的HTTP請求的host檢查。DevServer 默認只接受來自本地的請求，關閉後能夠接受來自任何 HOST 的請求。 它一般用於搭配 --host 0.0.0.0 使用，由於你想要其它設備訪問你本地的服務，但訪問時是直接經過 IP 地址訪問而不是 HOST 訪問，因此須要關閉 HOST 檢查。

10. https

DevServer 默認使用 HTTP 協議服務，它也能經過 HTTPS 協議服務。 有些狀況下你必須使用 HTTPS，例如 HTTP2 和 Service Worker 就必須運行在 HTTPS 之上。 要切換成 HTTPS 服務，最簡單的方式是：

devServer:{
  https: true
}

DevServer 會自動的爲你生成一份 HTTPS 證書

devServer:{
  https: {
    key: fs.readFileSync('path/to/server.key'),
    cert: fs.readFileSync('path/to/server.crt'),
    ca: fs.readFileSync('path/to/ca.pem')
  }
}

11. clientLogLevel

devServer.clientLogLevel 配置在客戶端的日誌等級，這會影響到你在瀏覽器開發者工具控制檯裏看到的日誌內容。 clientLogLevel 是枚舉類型，可取以下之一的值 none | error | warning | info。 默認爲 info 級別，即輸出全部類型的日誌，設置成 none 能夠不輸出任何日誌。

12. compress

devServer.compress 配置是否啓用 gzip 壓縮。boolean 爲類型，默認爲 false。

13. open

devServer.open 用於在 DevServer 啓動且第一次構建完時自動用你係統上默認的瀏覽器去打開要開發的網頁。 同時還提供 devServer.openPage 配置項用於打開指定 URL 的網頁。