當(dāng)項(xiàng)目逐漸變大,webpack 的編譯時(shí)間會變長,可以通過參數(shù)讓編譯的輸出內(nèi)容帶有進(jìn)度和顏色。
$ webpack --progress --colors
如果不想每次修改模塊后都重新編譯,那么可以啟動監(jiān)聽模式。開啟監(jiān)聽模式后,沒有變化的模塊會在編譯后緩存到內(nèi)存中,而不會每次都被重新編譯,所以監(jiān)聽模式的整體速度是很快的。
$ webpack --progress --colors --watch
當(dāng)然,使用 webpack-dev-server 開發(fā)服務(wù)是一個(gè)更好的選擇。它將在 localhost:8080 啟動一個(gè) express 靜態(tài)資源 web 服務(wù)器,并且會以監(jiān)聽模式自動運(yùn)行 webpack,在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項(xiàng)目中的頁面和編譯后的資源輸出,并且通過一個(gè) socket.io 服務(wù)實(shí)時(shí)監(jiān)聽它們的變化并自動刷新頁面。
# 安裝
$ npm install webpack-dev-server -g
# 運(yùn)行
$ webpack-dev-server --progress --colors