使用webpack構建本地服務器
想不想讓你的瀏覽器監測你都代碼的修改，並自動刷新修改后的結果，其實Webpack提供一個可選的本地開發服務器，這個本地服務器基於node.js構建，可以實現你想要的這些功能，不過它是一個單獨的組件，在webpack中進行配置之前需要單獨安裝它作為項目依賴
npm install --save-dev webpack-dev-server
devserver作為webpack配置選項中的一項，具有以下配置選項
| devserver配置選項 | 功能描述 |
|---|---|
| contentBase | 默認webpack-dev-server會為根文件夾提供本地服務器，如果想為另外一個目錄下的文件提供本地服務器，應該在這里設置其所在目錄（本例設置到“public"目錄） |
| port | 設置默認監聽端口，如果省略，默認為”8080“ |
| inline | 設置為true，當源文件改變時會自動刷新頁面 |
| colors | 設置為true，使終端輸出的文件為彩色的 |
| historyApiFallback | 在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html |
繼續把這些命令加到webpack的配置文件中，現在的配置文件如下所示
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄 colors: true,//終端中輸出結果為彩色 historyApiFallback: true,//不跳轉 inline: true//實時刷新 } }