Webpack与Rollup的异同点

相同点：

• 模块打包器：核心流程都是从入口文件开始，将模块解析成ast,递归找出依赖，最后所有依赖模块打包在一起
• 都支持plugin
• cmd、amd、hmr、code-split核心功能都差不多

不同点：

rollup:用来打包esm模块的工具，更适合打包library;学习成本较低，功能比较弱。

• 原生只支持esm，默认打包出来的也是esm模块代码
• 会使用上下文环境提供的es6特性，不会注入polyfill,运行时很轻，最终包体会更小
• 社区插件比较多
• 配置项更直观，容易理解，文档写的特别好

webpack:学习曲线特别陡峭，但是功能性更强，更适合打包web应用、小程序、桌面应用。

• 原生支持esm、cjs、umd、也支持这些方案的混用，默认打包出来的是类似于cmd的模块化，也支持打包成esm,但是还是实验功能
• 默认把所有东西都打包进来，包括一套模块化方案，兼容性更强，缺点就是运行时很重
• 官方插件比较多

        对比

• 原生的rollup不支持hmr、code-split等
• webpack内置了很多兼容性很强的runtime代码。rollup轻量很多，可能要手动补充一些polyfill
• webpack5支持lazyCompilation，rollup不支持
• rollup的配置比较精简，webpack的配置特别多
• 从性能来讲，webpack构建性能比rollup强，但是产物体积会比rollup大很多
• rollup只支持插件，而webpack支持loader和plugin
• 两者都是基于hook实现扩展，rollup的hook是声明式，webpack是命令式