如何使用JavaScript进行模块打包_JavaScript的Webpack和Rollup有何不同

选 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 字段，否则会保守保留整个模块。

• 例如一个工具库 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 插件，反而失去简洁性。