单页应用开发需要使用四类工程化工具：
- 依赖管理（包管理）：npm, yarn
- 打包工具：webpack
- 编译工具：babel
- 开发服务器：webpack-dev-server, live-server
依赖管理 dependency management tools
之所以要同时了解 npm 和 yarn 这两种依赖管理工具（也称为包管理），是因为一旦遇到问题，可以随时切换到另外一种。据反映 npm 有
打包工具 bundler
webpack 毫无疑问是占统治地位，已经几乎取代了 Grunt 和 Gulp 的地位，因为 webpack 不仅仅是打包，还加入了文件预处理的 loader 以及附加功能的 plugins。
rollup 因为目前做代码按需加载的效果比 webpack 更好，因此的压缩打包的效果可能比 webpack 更好，也会有公司在发布到生产环境之前，使用 rollup 做打包。但是开发环境毫无疑问还是使用 webpack。
编译工具 babel
要把下一代的 JavaScript 语言编译成目前大多数浏览器能够理解的 vanilla JavaScript，基本也是只能使用 babel 来进行编译。bebal 可以运行在很多平台上，通常开发环境是用 webpack 与 babel 进行结合来开发。
开发服务器
如果仅仅是自动刷新，live-server 这个 npm 包已经足够满足要求。但是如果需要结合 webpack 进行预处理、babel编译、图片与CSS处理等工作，就需要使用 webpack-dev-server，所以单页应用开发时可以直接使用 webpack-dev-server。
