Webpack實戰（二）：webpack-dev-server的介紹與用法

爲何要用webpack-dev-server

在開發中，咱們均可以發現僅僅使用Webpack以及它的命令行工具來進行開發調試的效率並不高,每次編寫好代碼以後，咱們須要執行npm run build命令更新js文件，而後再刷新頁面，才能看到更新效果。webpack-dev-server正好解決了這個問題，是一款便捷的本地開發工具。

webpack-dev-server 安裝及配置

用如下命令進行安裝：

npm install webpack-dev-server --save-dev

--save-dev：將webpack-dev-server保存配置信息到pacjage.json的devDependencies(開發環境依賴)節點中。這樣作是由於webpack-dev-server僅僅在本地開發時纔會用到，在生產環境中並不須要它 。項目上線的時候，要進行依賴安裝，就能夠經過npm install--production過濾掉devDependencies中的冗餘模塊，從而加快安裝和發佈的速度。

爲了便捷地啓動webpack-dev-server，咱們在package.json中添加一個dev指令：

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"  //open是自動執行後打開頁面
  }

最後，對webpack.config.js添加一個devServer對象，它是專門用來放webpack-dev-server配置的，webpack-dev-server能夠看做一個服務者，它的主要工做就是接收瀏覽器的請求，而後將資源返回。當服務啓動時，會先讓Webpack進行模塊打包並將資源準備好（在示例中就是bundle.js）。當webpack-dev-server接收到瀏覽器的資源請求時，它會首先進行URL地址校驗。若是該地址是資源服務地址（上面配置的publicPath），就會從Webpack的打包結果中尋找該資源並返回給瀏覽器。反之，若是請求地址不屬於資源服務地址，則直接讀取硬盤中的源文件並將其返回

"devServer": {
    "publicPath": './dist',
    "port": 3000
  }

這裏有一點須要注意。直接用Webpack開發和使用webpack-dev-server有一個很大的區別，前者每次都會生成budnle.js，而webpack-dev-server只是將打包結果放在內存中，並不會寫入實際的bundle.js，在每次webpack-dev-server接收到請求時都只是將內存中的打包結果返回給瀏覽器。

webpack-dev-server還有一項很便捷的特性就是live-reloading（自動刷新）。當咱們修改了內容以後，切換到瀏覽器你會發現，瀏覽器內容也變化了。

webpack-dev-server特色：

• 令Webpack進行模塊打包，並處理打包結果的資源請求
• 做爲普通的Web Server，處理靜態資源文件請求
• 解決了來回npm run build,再更新代碼的問題，比較便捷
• 能夠設置port端口和open(自動打開頁面)，其餘更多配置能夠參考官網api：https://webpack.js.org/configuration/dev-server/
• 自動刷新：瀏覽器自動更改後的內容