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

webpack-dev-server

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

1.安裝

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

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

2.npm啟動(dòng)

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

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

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