选 Rollup 发 npm 包，Webpack 做 SPA 应用；Rollup 专注库级打包、Tree-shaking 更激进、默认不处理 node_modules；Webpack 主打应用构建、内置 Dev Server/HMR/资源加载、开箱支持第三方模块。
Webpack 和 Rollup 都能打包 JavaScript 模块，但设计目标不同：Webpack 主打「应用级构建」，内置 Dev Server、HMR、资源加载（CSS/图片等）；Rollup 专注「库级打包」，默认输出更小、更干净的 ES 模块代码，Tree-shaking 更激进。
Webpack 默认支持动态 import()，Rollup 需要插件或配置才能处理
Webpack 原生识别 import() 语法并生成 code-splitting 的 chunk 文件；Rollup 默认不支持，会报错 Error: Dynamic imports are not supported when using 'output.format' != 'es'。
- Rollup 中若需动态导入，必须设置
output.format = 'es'，且推荐搭配@rollup/plugin-dynamic-import-vars处理变量路径 - Webpack 的
import('./module.js')可直接配合React.lazy或路由懒加载使用，无需额外插件 - Rollup 对
import()的静态分析更严格——路径必须是字面量，不能是拼接字符串或变量，否则 Tree-shaking 会失效或报错
Rollup 默认不解析 node_modules，Webpack 默认解析并尝试打包第三方模块
Rollup 默认只处理你显式 import 的源码文件，node_modules 中的依赖不会自动解析，除非你加 @rollup/plugin-node-resolve；而 Webpack 开箱即用，import _ from 'lodash' 会直接 resolve 并打包进 bundle。
- Rollup 这种“不碰
node_modules”的设计，让库作者能明确控制哪些依赖应 external（比如把react标记为external，避免重复打包） - Webpack 若未配
externals，lodash等大型包会被完整打进 bundle，体积暴涨；常见误操作是忘记在webpack.config.js中配置externals: { react: 'React', 'react-dom': 'ReactDOM' } - Rollup 的
external是函数或数组，写法更灵活：external: ['react', /@babel\/runtime/]
Tree-shaking 效果差异：Rollup 更彻底，Webpack 依赖 sideEffects 字段
两者都支持 ES 模块的静态分析式 Tree-shaking，但 Rollup 在无副作用假设下默认移除未使用导出；Webpack 则严格依赖 package.json 中的 sideEffects 字段，否则会保守保留整个模块。
立即学习“Java免费学习笔记（深入）”；
- 例如一个工具库
utils.js导出foo和bar，仅import { foo } from './utils.js'，Rollup 默认只打包foo；Webpack 若该模块所在 package 的package.json缺少"sideEffects": false或精确列表，可能连bar的定义也保留 - Rollup 不读取
package.json的sideEffects，它靠 AST 分析判断导出是否被引用，更“硬核”但也更难绕过 - Webpack 的
sideEffects是双刃剑：设成false可能误删有副作用的 CSS 导入（如import './index.css'），需显式列出非 JS 资源：["*.css", "*.scss"]
export default {
input: 'src/index.js',
output: { format: 'es', dir: 'dist' },
external: ['react', 'react-dom'],
plugins: [
resolve(),
commonjs()
]
};
真正决定选哪个的，不是功能多寡，而是你的输出产物类型：发 npm 包？选 Rollup；做 SPA 应用？Webpack（或 Vite）更省心。很多人踩坑是因为拿 Rollup 打包带大量第三方依赖的页面应用，结果手动配一堆 resolve / commonjs 插件，反而失去简洁性。
