rollup/wepack/vite傻傻分不清

Rollup：

• Rollup 是一个 JavaScript 模块打包器。它的主要目标是将代码库中的模块打包成更小、更高效的输出。Rollup 针对的是 ES6 模块系统，它的输出更适合于浏览器原生支持的模块加载机制。Rollup 在构建过程中更倾向于移除未使用的代码，从而生成更小的输出文件。这使得它在构建库和组件时特别有用。

Vite：

• Vite 是一个基于 ES6 模块的新型前端构建工具，旨在提供快速的开发体验。它利用浏览器原生 ES 模块加载的特性，在开发环境下以非常低的冷启动时间提供实时的热模块替换。Vite 不需要将所有代码预先打包，而是按需编译和传送模块。这使得开发过程更快，同时仍然可以在生产环境中使用 Rollup 或其他打包工具来构建最终的生产代码。

Webpack：

• Webpack 是一个功能强大的静态模块打包工具。它可以处理各种资源，不仅仅是 JavaScript 模块，还包括样式、图片、字体等。Webpack 的主要功能之一是通过依赖图来解析和加载模块，然后将它们打包到一个或多个输出文件中。Webpack 除了构建功能，还包括许多插件和加载器，使开发者可以进行更复杂的资源处理和优化，比如代码分割、懒加载、优化等。它在构建大型、复杂的应用程序时非常有用。

综上所述，这三个工具各自有其适用的场景：

• 如果你在构建一个库或者想要利用 ES6 模块特性来实现更高效的打包，那么 Rollup 是一个很好的选择。

• 如果你希望在开发过程中获得极快的热模块替换，同时仍然可以在生产环境中使用其他打包工具，那么 Vite 是一个新颖且有前景的选择。

• 如果你需要处理多种资源，并且需要更大的灵活性来配置和优化构建过程，同时构建大型应用，那么 Webpack 是一个经过时间考验的选择。