webpack、rollup、parcel 的选择

问题

如何选择 webpack、rollup、parcel 这三种打包工具？

解答

webpack - 适用于大型复杂应用

webpack 拥有强大的 loader 和插件生态，适合构建大型前端站点。

打包原理：webpack 打包后的文件本质上是一个立即执行函数（IIFE），接收一个模块对象作为参数。这个对象的键是各个模块的路径，值是模块内容。函数内部处理模块间的引用和执行逻辑。

// webpack 打包后的简化结构
(function(modules) {
  // 模块加载和执行逻辑
  function __webpack_require__(moduleId) {
    // ...
  }
  return __webpack_require__('./src/index.js');
})({
  './src/index.js': function(module, exports, require) {
    // 模块内容
  },
  './src/utils.js': function(module, exports, require) {
    // 模块内容
  }
});

这种方式更适合文件依赖复杂的应用开发，支持代码分割、按需加载等高级功能。

rollup - 适用于基础库打包

rollup 专注于将各个模块打包进一个文件，通过 Tree-shaking 删除无用代码，最大程度降低代码体积。

适合场景：基础库的打包，如 vue、d3 等。rollup 没有 webpack 那么多高级功能（如代码分割、按需加载），但更聚焦于库的开发，打包产物更简洁。

parcel - 适用于简单实验项目

parcel 的优势是零配置，可以快速看到效果，满足低门槛的开发需求。

缺点：生态较差，报错信息不够全面。除了玩具项目或实验项目，不建议在生产环境使用。

关键点

• webpack 适合复杂应用，生态完善，支持代码分割和按需加载
• rollup 适合库的开发，打包体积小，Tree-shaking 效果好
• parcel 适合快速实验，零配置但生态和错误提示较弱
• 选择工具要根据项目类型：应用用 webpack，库用 rollup，实验用 parcel