Webpack開發(fā)環(huán)境

當(dāng)項(xiàng)目逐漸變大，webpack 的編譯時(shí)間會(huì)變長，可以通過參數(shù)讓編譯的輸出內(nèi)容帶有進(jìn)度和顏色。

$ webpack --progress --colors

如果不想每次修改模塊后都重新編譯，那么可以啟動(dòng)監(jiān)聽模式。開啟監(jiān)聽模式后，沒有變化的模塊會(huì)在編譯后緩存到內(nèi)存中，而不會(huì)每次都被重新編譯，所以監(jiān)聽模式的整體速度是很快的。

$ webpack --progress --colors --watch

當(dāng)然，使用 webpack-dev-server 開發(fā)服務(wù)是一個(gè)更好的選擇。它將在 localhost:8080 啟動(dòng)一個(gè) express 靜態(tài)資源 web 服務(wù)器，并且會(huì)以監(jiān)聽模式自動(dòng)運(yùn)行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項(xiàng)目中的頁面和編譯后的資源輸出，并且通過一個(gè) socket.io 服務(wù)實(shí)時(shí)監(jiān)聽它們的變化并自動(dòng)刷新頁面。

# 安裝
$ npm install webpack-dev-server -g

# 運(yùn)行
$ webpack-dev-server --progress --colors