前端需要頻繁的修改js和樣式，且需要根據(jù)瀏覽器的頁面效果不斷的做調(diào)整；而且往往我們的開發(fā)目錄和本地發(fā)布目錄不是同一個，修改之后需要發(fā)布一下；另外一點就是并不是所有的效果都可以直接雙擊頁面就能看到，我們常常需要在本地用nginx建一個站點來觀察(自己電腦上ok了才放到測試環(huán)境去)。所以如果要用手工刷新瀏覽器和手動(或點擊)發(fā)布，還要啟動站點，確實是個不小的體力活。而這三點webpack可以幫我們做到。

webpack-dev-server

webpack是通過webpack-dev-server(WDS)來實現(xiàn)自動刷新。WDS是一個運行在內(nèi)存中的開發(fā)服務(wù)器(一個express)。啟動之后，它會檢測文件是否發(fā)生改變并再自動編譯一次。

1.安裝

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

先通過npm將其安裝到開發(fā)目錄。安裝完成之后會在node_modules/bin下找到。

2.npm啟動

然后修改package.json:(基于上一節(jié))

 "scripts": {    "start": "webpack-dev-server --env development",    "build": "webpack --env production"
  }

現(xiàn)在就可以通過npm run start 或者 npm start來啟動了。<