單頁應(yīng)用開發(fā)需要使用四類工程化工具：

• 依賴管理（包管理）：npm, yarn
• 打包工具：webpack
• 編譯工具：babel
• 開發(fā)服務(wù)器：webpack-dev-server, live-server

依賴管理 dependency management tools

之所以要同時(shí)了解 npm 和 yarn 這兩種依賴管理工具（也稱為包管理），是因?yàn)橐坏┯龅絾栴}，可以隨時(shí)切換到另外一種。據(jù)反映 npm 有

打包工具 bundler

webpack 毫無疑問是占統(tǒng)治地位，已經(jīng)幾乎取代了 Grunt 和 Gulp 的地位，因?yàn)?webpack 不僅僅是打包，還加入了文件預(yù)處理的 loader 以及附加功能的 plugins。
rollup 因?yàn)槟壳白龃a按需加載的效果比 webpack 更好，因此的壓縮打包的效果可能比 webpack 更好，也會(huì)有公司在發(fā)布到生產(chǎn)環(huán)境之前，使用 rollup 做打包。但是開發(fā)環(huán)境毫無疑問還是使用 webpack。

編譯工具 babel

要把下一代的 JavaScript 語言編譯成目前大多數(shù)瀏覽器能夠理解的 vanilla JavaScript，基本也是只能使用 babel 來進(jìn)行編譯。bebal 可以運(yùn)行在很多平臺(tái)上，通常開發(fā)環(huán)境是用 webpack 與 babel 進(jìn)行結(jié)合來開發(fā)。

開發(fā)服務(wù)器

如果僅僅是自動(dòng)刷新，live-server 這個(gè) npm 包已經(jīng)足夠滿足要求。但是如果需要結(jié)合 webpack 進(jìn)行預(yù)處理、babel編譯、圖片與CSS處理等工作，就需要使用 webpack-dev-server，所以單頁應(yīng)用開發(fā)時(shí)可以直接使用 webpack-dev-server。