单页应用开发的四类工程化工具

单页应用开发需要使用四类工程化工具：

• 依赖管理（包管理）：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。