webpack構建本地服務器

想不想讓你的瀏覽器監測你的代碼的修改，並自動刷新修改后的結果，其實Webpack提供一個可選的本地開發服務器，這個本地服務器基於node.js構建，

可以實現你想要的這些功能，不過它是一個單獨的組件，在webpack中進行配置之前需要單獨安裝它作為項目依賴

1、安裝webpack-dev-server模塊

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

 

2、如何配置webpack-dev-server

　　A、devserver作為webpack配置選項中的一項，具有以下配置選項

devserver配置選項	功能描述
contentBase	默認webpack-dev-server會為根文件夾提供本地服務器，如果想為另外一個目錄下的文件提供本地服務器，應該在這里設置其所在目錄（本例設置到“public"目錄）
port	設置默認監聽端口，如果省略，默認為”8080“
inline	設置為true，當源文件改變時會自動刷新頁面
colors	設置為true，使終端輸出的文件為彩色的
historyApiFallback	在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html

作者：zhangwang
鏈接：http://www.jianshu.com/p/42e11515c10f
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

 

 

　　B、繼續把這些命令加到webpack的配置文件中，現在的配置文件如下所示（webpack.config.js）