Rollup.js 和 Webpack 都是**流行的 JavaScript 模块打包工具。**它们在前端开发中被广泛用于将多个模块打包成一个或多个 bundle，以优化项目的性能和可维护性。
bundle：包含了项目运行所需的所有代码和资源的文件。
核心功能
- Rollup.js ：
- ES6 模块打包：对 ES6 模块有原生的支持，能将多个 ES6 模块打包成一个单独的文件，并且在打包过程中利用 ES6 模块的静态结构进行优化。
- Tree Shaking ：这是 Rollup.js 的一个重要特性，它可以分析代码中的导入和导出，去除未被使用的代码，从而减小打包后的文件体积。
- Webpack ：
- 模块打包：支持多种模块规范，如 CommonJS、AMD、ES6 等。它将所有模块视为一个依赖图，然后根据配置将这些模块打包成一个或多个 bundle 文件。
- 资源处理 ：通过 loader 可以处理各种类型的资源文件。例如，使用
css-loader和style-loader处理 CSS 文件，使用file-loader或url-loader处理图片和字体文件等。还能通过 plugin 进行各种优化和扩展，如UglifyJsPlugin用于压缩 JavaScript 代码，HtmlWebpackPlugin用于自动生成 HTML 文件并引入打包后的脚本。
配置复杂度
- Rollup.js：配置相对简单，通常只需要一个基本的配置文件，用于指定入口文件、出口文件以及一些插件等。对于简单的 ES6 模块打包场景，配置可以非常简洁。
- Webpack：配置较为复杂，因为它具有丰富的功能和强大的扩展性，需要配置各种 loader、plugin、入口文件、出口文件、模块解析规则等。对于大型项目，Webpack 的配置可能会非常庞大和复杂，但也正因如此，它能够满足各种复杂的项目需求。
适用场景
- Rollup.js ：适用于开发 JavaScript 库和框架， 尤其是注重代码体积和性能优化的场景。由于其出色的 Tree Shaking 功能，能够将库中的未使用代码去除，使得打包后的库文件体积更小，更适合发布到 npm 等平台供他人使用。
- Webpack ：适用于大型的前端应用程序开发 ，特别是需要处理多种类型资源、进行复杂的构建流程和优化的项目。它在构建单页应用（SPA）、多页应用（MPA）以及各种复杂的前端项目中表现出色，能够通过各种插件和 loader 满足项目的多样化需求。